import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import {useMemo} from "react";
import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import {faIR} from "@mui/x-date-pickers/locales";
import DataTable from "@/core/components/DataTable";

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

    const columns = useMemo(
        () => [
            {
                accessorFn: (row) => row.id,
                id: "id",
                header: t("ProvinceManager.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,
                id: "name",
                header: t("ProvinceManager.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("ProvinceManager.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.phone_number,
                id: "phone_number",
                header: t("ProvinceManager.phone_number"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains",
                    "lessThan",
                    "greaterThan",
                    "between",
                ],
                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("ProvinceManager.created_at"),
                enableColumnFilter: true,
                datatype: "date",
                filterFn: "lessThan",
                columnFilterModeOptions: ["lessThan", "greaterThan"],
                Cell: ({renderedCellValue}) => {
                    return <Typography variant="body2">{renderedCellValue}</Typography>;
                },
                Header: ({column}) => <em>{column.columnDef.header}</em>,
                Filter: ({column}) => {
                    const filterFnValue = column.columnDef._filterFn;
                    return (
                        <Box sx={{display: "flex", alignItems: "start"}}>
                            <LocalizationProvider
                                dateAdapter={AdapterDateFnsJalali}
                                localeText={
                                    faIR.components.MuiLocalizationProvider.defaultProps
                                        .localeText
                                }
                            >
                                <MobileDateTimePicker
                                    ampm={false}
                                    onChange={(newValue) => {
                                        const date = new Date(newValue);
                                        const formattedDate = moment(date)
                                            .locale("en")
                                            .format("YYYY-MM-DD HH:mm");
                                        column.setFilterValue(formattedDate);
                                    }}
                                    slotProps={{
                                        textField: {
                                            placeholder: "تاریخ خود را وارد کنید",
                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
                                            sx: {minWidth: "120px"},
                                            variant: "standard",
                                        },
                                    }}
                                    value={
                                        column.getFilterValue()
                                            ? new Date(column.getFilterValue())
                                            : null
                                    }
                                />
                            </LocalizationProvider>
                            <IconButton
                                size="small"
                                onClick={() => {
                                    column.setFilterValue(null);
                                }}
                                sx={{
                                    color: column.getFilterValue()
                                        ? "rgba(0, 0, 0, 0.54)"
                                        : "#bfbfbf",
                                }}
                            >
                                <ClearIcon/>
                            </IconButton>
                        </Box>
                    );
                },
            },
            {
                accessorFn: (row) =>
                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
                id: "updated_at",
                header: t("ProvinceManager.updated_at"),
                enableColumnFilter: false,
                datatype: "numeric",
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.navgan_id,
                id: "navgan_id",
                header: t("ProvinceManager.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.vehicle_type,
                id: "vehicle_type",
                header: t("ProvinceManager.vehicle_type"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.state_name,
                id: "state_id",
                header: t("ProvinceManager.state_name"),
                enableColumnFilter: false,
                datatype: "numeric",
                // filterFn: "equals",
                // filterSelectOptions: [
                // ],
                // filterVariant: "select",
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
        ],
        []
    );
    return (
        <DashboardLayouts>
            <Box sx={{px: 3}}>
                <DataTable
                    tableUrl={GET_PROVINCE_MANAGER}
                    columns={columns}
                    selectableRow={false}
                    enableCustomToolbar={true}
                    enableLastUpdate={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>
        </DashboardLayouts>
    );
}

export default DashboardProvinceManagerComponent;