"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_ROAD_MISSIONS_CONTROL_LIST } from "@/core/utils/routes";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import ShowArea from "./Actions/showArea";
import RowActions from "./RowActions";

const ControlList = () => {
    const typeOptions = [
        { value: 1, label: "روزانه" },
        { value: 2, label: "ساعتی" },
    ];

    const columns = useMemo(
        () => [
            {
                accessorKey: "id",
                header: "کد یکتا",
                id: "id",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "type",
                header: "نوع",
                id: "type",
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
                sortDescFirst: true,
                grow: false,
                size: 100,
                columnSelectOption: () => {
                    return typeOptions.map((type) => ({
                        value: type.value,
                        label: type.label,
                    }));
                },
                Cell: ({ row }) => row.original.type_fa,
            },
            {
                accessorFn: (row) => moment(row.start_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ شروع",
                id: "start_date",
                enableColumnFilter: true,
                datatype: "date",
                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
                accessorFn: (row) => moment(row.end_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ پایان",
                id: "end_date",
                enableColumnFilter: true,
                datatype: "date",
                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
                accessorKey: "end_point",
                header: "مقصد",
                id: "end_point",
                enableColumnFilter: false,
                datatype: "numeric",
                filterMode: "equals",
                grow: false,
                size: 100,
            },
            {
                header: "محدوده",
                id: "area",
                enableColumnFilter: false,
                datatype: "numeric",
                filterMode: "equals",
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
                    sx: {
                        borderLeft: "1px solid #e1e1e1",
                        py: 0,
                        "&:first-of-type": {
                            borderLeft: "unset",
                        },
                    },
                },
                Cell: ({ row }) =>
                    row.original.area ? (
                        <Stack alignItems={"center"} justifyContent={"center"}>
                            <ShowArea area={row.original.area} />
                        </Stack>
                    ) : (
                        "-"
                    ),
            },
        ],
        []
    );

    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_ROAD_MISSIONS_CONTROL_LIST}
                    page_name={"roadMissionsControl"}
                    table_name={"roadMissionsControlList"}
                    enableRowActions
                    positionActionsColumn={"first"}
                    RowActions={RowActions}
                />
            </Box>
        </>
    );
};
export default ControlList;