import { useMemo } from "react";
import { Box, Stack } from "@mui/material";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import RowActions from "./RowActions";
import { GET_OBSERVED_GASHT_LIST } from "@/core/utils/routes";
import LocationForm from "./LocationForm";

const TableInfo = ({ specialFilter, setTabState, setItemInfo }) => {
    const columns = useMemo(
        () => [
            {
                accessorKey: "road_patrol_id",
                header: "کد یکتا گشت",
                id: "road_patrol_id",
                enableColumnFilter: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 50,
            },
            {
                accessorKey: "priority_fa",
                header: "اولویت",
                id: "priority_fa",
                enableColumnFilter: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 80,
            },
            {
                accessorKey: "local_name",
                header: "نام محلی",
                id: "local_name",
                enableColumnFilter: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "item_name",
                header: "نام ایتم",
                id: "item_name",
                enableColumnFilter: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "sub_item_name",
                header: "موضوع مشاهده شده",
                id: "sub_item_name",
                enableColumnFilter: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "location",
                header: "موقعیت", // Location
                id: "location",
                enableColumnFilter: false,
                enableSorting: false,
                datatype: "array",
                grow: false,
                size: 50,
                muiTableBodyCellProps: {
                    sx: {
                        borderLeft: "1px solid #e1e1e1",
                        py: 0,
                        "&:first-of-type": {
                            borderLeft: "unset",
                        },
                    },
                },
                Cell: ({ renderedCellValue, row }) => {
                    return (
                        <Stack alignItems={"center"} justifyContent={"center"}>
                            <LocationForm start_lat={row.original.start_lat} start_lng={row.original.start_lon} />
                        </Stack>
                    );
                },
            },
        ],
        []
    );
    return (
        <>
            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                <DataTableWithAuth
                    table_title={"لیست موارد مشاهده شده"}
                    columns={columns}
                    specialFilter={specialFilter}
                    table_url={GET_OBSERVED_GASHT_LIST}
                    page_name={"operator"}
                    table_name={"Observed_Gasht_List"}
                    enableRowActions
                    positionActionsColumn={"last"}
                    RowActions={(props) => (
                        <RowActions {...props} setTabState={setTabState} setItemInfo={setItemInfo} />
                    )}
                />
            </Box>
        </>
    );
};
export default TableInfo;