import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import DataTable from "@/core/components/DataTable";
import moment from "jalali-moment";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
import TableRowActions from "./TableRowActions"

function DashboardRoleManagementComponent() {
    const t = useTranslations();

    const columns = useMemo(() => [{
        accessorFn: (row) => row.id,
        id: "id",
        sortDescFirst: true,
        header: t("RoleManagement.id"),
        enableColumnFilter: true,
        datatype: "numeric",
        filterFn: "equals",
        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
    },
        {
            accessorFn: (row) => row.name_fa,
            id: "name_fa",
            header: t("RoleManagement.name_fa"),
            enableColumnFilter: true,
            datatype: "text",
            filterFn: "contains",
            columnFilterModeOptions: ["contains", "equals", "notEquals"],
            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
        },
        {
            accessorFn: (row) => row.name,
            id: "name",
            header: t("RoleManagement.name"),
            enableColumnFilter: true,
            datatype: "text",
            filterFn: "contains",
            columnFilterModeOptions: ["contains"],
            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
        },
        {
            accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
            id: "created_at",
            header: t("RoleManagement.created_at"),
            enableColumnFilter: true,
            datatype: "date",
            filterFn: "lessThan",
            columnFilterModeOptions: ["lessThan", "greaterThan"],
            Cell: ({renderedCellValue}) => {
                return <Typography variant="body2">{renderedCellValue}</Typography>;
            },
            Header: ({column}) => <>{column.columnDef.header}</>,
            Filter: ({column}) => {
                return (<MuiDatePicker column={column}/>);
            },
        }, {
            accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
            id: "updated_at",
            header: t("RoleManagement.updated_at"),
            enableColumnFilter: false,
            datatype: "numeric",
            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
        }], []);
    return (
        <Box sx={{px: 3}}>
            <DataTable
                tableUrl={GET_ROLE_MANAGEMENT}
                columns={columns}
                selectableRow={false}
                enableCustomToolbar={true}
                CustomToolbar={TableToolbar}
                enableLastUpdate={true}
                enablePinning={true}
                enableDensityToggle={false}
                sorting={[{
                    id: 'id', desc: true
                }]}
                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 DashboardRoleManagementComponent;