"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_PERMISSION_TABLE_LIST } from "@/core/utils/routes";
import { Box, Stack, Typography } from "@mui/material";
import { useMemo } from "react";
import Toolbar from "./Toolbar";
import RowActions from "./RowActions";
import moment from "jalali-moment";
import DoneIcon from "@mui/icons-material/Done";
import ClearIcon from "@mui/icons-material/Clear";

const PermissionList = () => {
    const columns = useMemo(
        () => [
            {
                accessorKey: "id",
                header: "کد یکتا",
                id: "id",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "type",
                header: "گروه (انگلیسی)",
                id: "type",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "type_fa",
                header: "گروه (فارسی)",
                id: "type_fa",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "name",
                header: "نام انگلیسی",
                id: "name",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "name_fa",
                header: "نام فارسی",
                id: "name_fa",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "need_province",
                header: "دسترسی استانی",
                id: "need_province",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ renderedCellValue }) => (
                    <>
                        {renderedCellValue === 1 ? (
                            <Stack alignItems={"center"} justifyContent={"center"}>
                                <DoneIcon color="primary" />
                            </Stack>
                        ) : (
                            <Stack alignItems={"center"} justifyContent={"center"}>
                                <ClearIcon color="error" />
                            </Stack>
                        )}
                    </>
                ),
            },
            {
                accessorKey: "need_edare_shahri",
                header: "دسترسی اداره شهری",
                id: "need_edare_shahri",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ renderedCellValue }) => (
                    <>
                        {renderedCellValue === 1 ? (
                            <Stack alignItems={"center"} justifyContent={"center"}>
                                <DoneIcon color="primary" />
                            </Stack>
                        ) : (
                            <Stack alignItems={"center"} justifyContent={"center"}>
                                <ClearIcon color="error" />
                            </Stack>
                        )}
                    </>
                ),
            },
            {
                accessorFn: (row) => {
                    const date = row.created_at ? new Date(row.created_at) : null;
                    return date ? moment(date).locale("fa").format("HH:mm | jYYYY/jMM/jDD") : "-";
                },
                header: "تاریخ ثبت",
                id: "created_at",
                enableColumnFilter: true,
                datatype: "date",
                filterMode: "between",
                grow: false,
                size: 100,
            },
        ],
        []
    );

    return (
        <>
            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                <DataTableWithAuth
                    need_filter={true}
                    columns={columns}
                    sorting={[{ id: "id", desc: true }]}
                    table_url={GET_PERMISSION_TABLE_LIST}
                    page_name={"permissionTablePage"}
                    table_name={"permissionTableList"}
                    TableToolbar={Toolbar}
                    enableRowActions
                    positionActionsColumn={"last"}
                    RowActions={RowActions}
                />
            </Box>
        </>
    );
};
export default PermissionList;