import DataTable_Paper from "./table/Paper";
import { useMaterialReactTable } from "material-react-table";
import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
import useTableSetting from "@/lib/hooks/useTableSetting";
import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
import useDataTable from "@/lib/hooks/useDataTable";
import { useMemo, useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import useSWR from "swr";

const DataTable_Main = (props) => {
    const request = useRequest();
    const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
    const { filterData, sortData, setSortData } = useDataTable();
    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
    const flatColumns = flattenArrayOfObjects(columns, "columns");
    const { settingStore, hideAction } = useTableSetting();
    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });

    const onColumnVisibilityChange = (event) => {
        const settingValue = event();
        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
    };

    const onSortingChange = (event) => {
        setSortData(event);
    };

    const fetchUrl = useMemo(() => {
        const params = new URLSearchParams();
        params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
        params.set("size", pagination.pageSize);
        params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData]));
        params.set("sorting", JSON.stringify(sortData));
        return `${table_url}?${params}`;
    }, [table_url, filterData, pagination, columns, sortData]);

    const fetcher = async (url) => {
        try {
            const response = await request(url);
            return response.data;
        } catch (error) {
            throw error;
        }
    };

    const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
        revalidateIfStale: true,
        revalidateOnFocus: false,
        revalidateOnReconnect: true,
        keepPreviousData: true,
    });

    const table = useMaterialReactTable({
        localization: FA_DATATABLE_LOCALIZATION,
        columns,
        data: data?.data ?? [],
        initialState: {
            density: "compact",
            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
            sorting: sortData,
            ...initialStateProps,
        },
        state: {
            showProgressBars: isValidating,
            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
            sorting: sortData,
            pagination,
        },
        muiTableHeadProps: {
            sx: {
                borderTop: "1px solid #e1e1e1",
                borderBottom: "2px solid #e1e1e1",
            },
        },
        muiTableHeadCellProps: {
            sx: {
                color: "primary.main",
                borderLeft: "1px solid #e1e1e1",
                "&:first-of-type": {
                    borderLeft: "unset",
                },
            },
        },
        muiTableBodyCellProps: {
            sx: {
                borderLeft: "1px solid #e1e1e1",
                "&:first-of-type": {
                    borderLeft: "unset",
                },
            },
        },
        manualFiltering: true,
        manualPagination: true,
        manualSorting: true,
        onPaginationChange: setPagination,
        onColumnVisibilityChange: onColumnVisibilityChange,
        onSortingChange: onSortingChange,
        renderTopToolbarCustomActions: ({ table }) => (
            <>
                <TableToolbar mutate={mutate} />
            </>
        ),
        ...props,
    });

    return (
        <DataTable_Paper
            table={table}
            need_filter={need_filter}
            mutate={mutate}
            table_url={table_url}
            columns={flatColumns}
            user_id={user_id}
            page_name={page_name}
            table_name={table_name}
        />
    );
};

export default DataTable_Main;
