Platform page

//platform page

"use client"

import {AppContext} from "@/app/context";
import {useCallback, useContext, useEffect, useState} from "react";
import {dataBalkRobotEndpoints, invokeDataBalkRobot} from "@/core/services/dataBalkRobot";
import {Spinner} from "@fluentui/react-components";
import Table from "@/components/general/tables/incidentTable";
import Filter from "@/components/general/filter";
import {columns, columnSizingOptions} from "@/app/(service)/platform/columns";
import {BeheerIncident} from "@/app/(service)/interfaces";
import IncidentCards from "@/app/(service)/platform/cards";
import {filters} from "@/app/(service)/platform/filters";
import {DataGridProps} from "@fluentui-contrib/react-data-grid-react-window";

const Platform = () => {
    const customer  = useContext(AppContext)?.customer;

    const initialSelectedFilters: Record<string, number[]> = {"Status": [
        799880000, 799880001, 799880002]};

    filters.forEach((category) => {
        initialSelectedFilters[category.title] = [];
    });

    const [beheerIncidents, setBeheerIncidents] = useState<BeheerIncident[]>([]);
    const [selectedFilters, setSelectedFilters] = useState(initialSelectedFilters);
    const [isCardView, setIsCardView] = useState(true);
    const [loading, setLoading] = useState(false);
    const [searchText, setSearchText] = useState<string>("");
    const [sortState, setSortState] = useState<Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]>({
        sortColumn: "melder",
        sortDirection: "descending",
    });

    const handleSearchTextChange = (newSearchText) => {
        const updatedSearchText = typeof newSearchText === "string" ? newSearchText : newSearchText?.value || "";
        setSearchText(updatedSearchText);
    };

    const fetchData = useCallback(async () => {
        try {
            setLoading(true);
            const beheerIncidents = await invokeDataBalkRobot<BeheerIncident[]>(dataBalkRobotEndpoints.getBeheerIncident + `${customer?.accountId}`, "GET");
            setBeheerIncidents(beheerIncidents);
        } catch (error: any) {
            console.log(error)
        } finally {
            setLoading(false);
        }
    }, [customer]);

    useEffect(() => {
        fetchData().then();
    }, [fetchData]);

    const applyFilters = (incidents: BeheerIncident[], selectedFilters: Record<string, number[]>, search: string) => {
        const filtered = incidents.filter((incident) => {
            for (const category in selectedFilters) {
                if (selectedFilters[category].length > 0) {
                    const propertyMatched = (
                        incident.frequentie === undefined || selectedFilters[category].includes(incident.frequentie)
                    ) || (
                        incident.prioriteit === undefined || selectedFilters[category].includes(incident.prioriteit)
                    ) || (
                        incident.status === undefined || selectedFilters[category].includes(incident.status)
                    ) || (
                        incident.fibo === undefined || selectedFilters[category].includes(incident.fibo)
                    );

                    if (!propertyMatched) {
                        console.log("Property not matched:", incident);
                        return false;
                    }
                }
            }

            const searchLowerCase = (search || "").toString().toLowerCase();

            if (searchLowerCase.trim() !== "") {
                if (
                    !incident.onderwerp.toLowerCase().includes(searchLowerCase) &&
                    !incident.beheernummer.toLowerCase().includes(searchLowerCase) &&
                    !incident.behandelaarFullName.toLowerCase().includes(searchLowerCase)
                ) {
                    return false;
                }
            }

            return true;
        });

        return filtered;
    };

    const handleFilterChange = (categoryName: string, optionId: number) => {
        const updatedFilters = { ...selectedFilters };

        if (updatedFilters[categoryName].includes(optionId)) {
            updatedFilters[categoryName] = updatedFilters[categoryName].filter((id) => id !== optionId);
        } else {
            updatedFilters[categoryName] = [...updatedFilters[categoryName], optionId];
        }
        setSelectedFilters(updatedFilters);
    };

    const handleSortChange = (event, sortState) => {
        setSortState(sortState);

        setBeheerIncidents(beheerIncidents.sort((a, b) => {

            if (sortState.sortColumn == "melder"){
                return sortState.sortDirection == "ascending" ? a.behandelaarFullName.localeCompare(b.behandelaarFullName) : b.behandelaarFullName.localeCompare(a.behandelaarFullName);
            }

            if (sortState.sortDirection == "ascending"){
                if (a[sortState.sortColumn] > b[sortState.sortColumn]) return 1;
                if (a[sortState.sortColumn] < b[sortState.sortColumn]) return -1;
            }

            //Descending
            if (sortState.sortDirection == "descending"){
                if (a[sortState.sortColumn] > b[sortState.sortColumn]) return -1;
                if (a[sortState.sortColumn] < b[sortState.sortColumn]) return 1;
            }
            return 0; // Rows are equal

        }));
    };

    const filteredIncidents: BeheerIncident[] = applyFilters(beheerIncidents, selectedFilters, searchText);

    const renderedIncidents = isCardView ? (
        <IncidentCards incidents={filteredIncidents}/>
    ) : (
        <Table items={beheerIncidents} columns={columns} columnSizingOptions={columnSizingOptions} sortState={sortState} onSortChange={handleSortChange}/>
    );

    const toggleView = () => {
        setIsCardView(!isCardView);
    };

    return (
        <main>
            <Filter
                toggleView={toggleView}
                filters={filters}
                handleFilterChange={handleFilterChange}
                selectedFilters={selectedFilters}
                handleSearchTextChange={handleSearchTextChange}
                searchText={searchText}
                searchBoxWidth={"34em"}
            />
            {loading ? (
                <Spinner />
            ) : (
                renderedIncidents
            )}
        </main>
    )
}

export default Platform;