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

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

    const columns = useMemo(
        () => [
            {
                accessorFn: (row) => row.id,
                id: "id",
                header: t("PassengerBoss.id"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.is_legal_person,
                id: "is_legal_person",
                header: t("PassengerBoss.is_legal_person"),
                enableColumnFilter: false,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals"],
                Cell: ({ renderedCellValue }) => (
                    <Typography variant="body2">
                        {renderedCellValue === 1 ? `${t("PassengerBoss.hoghoghi")}` : `${t("PassengerBoss.haghighi")}`}
                    </Typography>
                ),
            },
            {
                accessorFn: (row) => row.navgan_id,
                id: "navgan_id",
                header: t("PassengerBoss.navgan_id"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.first_name,
                id: "first_name",
                header: t("PassengerBoss.first_name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.last_name,
                id: "last_name",
                header: t("PassengerBoss.last_name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.national_id,
                id: "national_id",
                header: t("PassengerBoss.national_id"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.shenase_meli,
                id: "shenase_meli",
                header: t("PassengerBoss.shenase_meli"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.province_name,
                id: "province_name",
                header: t("PassengerBoss.province_name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.city_name,
                id: "city_name",
                header: t("PassengerBoss.city_name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                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("PassengerBoss.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) => row.phone_number,
                id: "phone_number",
                header: t("PassengerBoss.phone_number"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.statement_count,
                id: "statement_count",
                header: t("PassengerBoss.statement_count"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.navgan_capacity,
                id: "navgan_capacity",
                header: t("PassengerBoss.navgan_capacity"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.manufacture_date,
                id: "manufacture_date",
                header: t("PassengerBoss.manufacture_date"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.vehicle_type,
                id: "vehicle_type",
                header: t("PassengerBoss.vehicle_type"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
            {
                accessorFn: (row) => row.plate_number,
                id: "plate_number",
                header: t("PassengerBoss.plate_number"),
                enableColumnFilter: false,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({ renderedCellValue }) => (
                    <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1 }} direction={"row"}>
                        <Stack sx={{ borderRight: 1, borderColor: "divider", textAlign: "center", width: "40%" }}>
                            {renderedCellValue.split("-")[3]}
                        </Stack>
                        <Stack direction={"row"} sx={{ width: "100%", px: 0.5 }}>
                            <Stack
                                sx={{
                                    textAlign: "center",
                                    width: "100%",
                                }}
                            >
                                {renderedCellValue.split("-")[2]}
                            </Stack>
                            <Stack
                                sx={{
                                    textAlign: "center",
                                    width: "100%",
                                }}
                            >
                                {renderedCellValue.split("-")[1]}
                            </Stack>
                            <Stack
                                sx={{
                                    textAlign: "center",
                                    width: "100%",
                                }}
                            >
                                {renderedCellValue.split("-")[0]}
                            </Stack>
                        </Stack>
                    </Stack>
                ),
            },
            {
                accessorFn: (row) => row.state_name,
                id: "state_id",
                header: t("PassengerBoss.state_name"),
                enableColumnFilter: false,
                datatype: "numeric",
                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
            },
        ],
        []
    );
    return (
        <Box sx={{ px: 3 }}>
            <DataTable
                tableUrl={GET_PASSENGER_BOSS}
                columns={columns}
                selectableRow={false}
                enableCustomToolbar={true}
                CustomToolbar={TableToolbar}
                enableLastUpdate={true}
                sorting={[
                    {
                        id: "statement_count",
                        desc: true,
                    },
                ]}
                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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                enableRowActions={true}
                TableRowAction={TableRowActions}
            />
        </Box>
    );
}

export default DashboardPassengerOfficeComponent;