import {useMaterialReactTable} from "material-react-table";
import DataTable_Main from "./Main";
import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
import useTableSetting from "@/lib/hooks/useTableSetting";
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
import Toolbar from "@/components/home/Toolbar";

const data = [
    {
        name: {
            firstName: 'John',
            lastName: 'Doe',
        },
        address: '261 Erdman Ford',
        city: 'East Daphne',
        state: 'Kentucky',
    },
    {
        name: {
            firstName: 'Jane',
            lastName: 'Doe',
        },
        address: '769 Dominic Grove',
        city: 'Columbus',
        state: 'Ohio',
    },
    {
        name: {
            firstName: 'Joe',
            lastName: 'Doe',
        },
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
    },
    {
        name: {
            firstName: 'Kevin',
            lastName: 'Vandy',
        },
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
    },
    {
        name: {
            firstName: 'Joshua',
            lastName: 'Rolluffs',
        },
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
    },
];

const DataTable = (props) => {
    const {userId, pageName, tableName, columns, initialStateProps} = props
    const {settingStore, hideAction, sortAction} = useTableSetting();
    const flatColumns = flattenArrayOfObjects(columns, 'columns')

    const onColumnVisibilityChange = (event) => {
        const settingValue = event();
        hideAction(userId, pageName, tableName, settingValue, flatColumns);
    };
    const onSortingChange = (event) => {
        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
        sortAction(userId, pageName, tableName, settingValue, flatColumns);
    }


    const table = useMaterialReactTable({
        localization: FA_DATATABLE_LOCALIZATION,
        columns,
        data: data,
        // manualSorting: true,
        renderTopToolbarCustomActions: ({table}) => (<>
            <Toolbar
                columns={flatColumns}
            />
        </>),
        initialState: {
            density: 'compact',
            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
            ...initialStateProps
        },
        state: {
            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
        },
        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"
                }
            },
        },
        onColumnVisibilityChange: onColumnVisibilityChange,
        onSortingChange: onSortingChange,
        ...props
    })

    return <DataTable_Main table={table} columns={columns}/>;
};

export default DataTable;
