"use client"
import {useMemo, useState} from 'react';
import {MaterialReactTable} from 'material-react-table';
import useTableSetting from "@/lib/hooks/useTableSetting";
import {Typography} from "@mui/material";


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 TestDataTable = ({columns}) => {
    const [userId, setUserId] = useState(2);
    const [pageName, setPageName] = useState('loan');
    const [tableName, setTableName] = useState('loan_table');
    const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();


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

    return (
        <>
        <Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
        <MaterialReactTable
            columns={columns}
            data={data}
            manualSorting={true}
            initialState={{
                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
            }}
            state={{
                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
            }}
            onColumnVisibilityChange={onColumnVisibilityChange}
            onSortingChange={onSortingChange}
        />
        </>
    );
};

export default TestDataTable;