import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_ADMIN_SETTING} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import DataTable from "@/core/components/DataTable";
import TableRowActions from "@/components/dashboard/admin-setting/TableRowActions";
import TableToolbar from "@/components/dashboard/admin-setting/TableToolbar";

function DashboardAdminSettingComponent() {
    const t = useTranslations();
    const columns = useMemo(
        () => [
            {
                accessorFn: (row) => row.id,
                id: "id",
                header: t("AdminSetting.id"),
                enableColumnFilter: true,
                datatype: "number",
                filterFn: "equals",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.name_fa,
                id: "name_fa",
                header: t("AdminSetting.name_fa"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals"],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.name,
                id: "name",
                header: t("AdminSetting.name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals"],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.value,
                id: "value",
                header: t("AdminSetting.value"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: [
                    "equals",
                    "contains",
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
        ],
        []
    );
    return (
        <Box sx={{px: 3}}>
            <DataTable
                tableUrl={GET_ADMIN_SETTING}
                columns={columns}
                selectableRow={false}
                enableCustomToolbar={true}
                CustomToolbar={TableToolbar}
                enableLastUpdate={true}
                sorting={[{
                    id: 'id', desc: false
                }]}
                enablePinning={true}
                enableDensityToggle={false}
                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                enableColumnFilters={true}
                enableHiding={true}
                enableFullScreenToggle={false}
                enableGlobalFilter={false}
                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                enableRowActions={true}
                TableRowAction={TableRowActions}
            />
        </Box>
    );
}

export default DashboardAdminSettingComponent;
