import {
  Button,
  Checkbox,
  FormControlLabel,
  IconButton,
  Tooltip,
  Typography,
} from "@mui/material";
import { useState } from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import ContactPageIcon from "@mui/icons-material/ContactPage";
import { useNavigate } from "react-router-dom";
import { ROUTE_CITY_USER_FILE } from "../../../../routes/routes";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { CitySubmitAviculture } from "../city-submit-aviculture/CitySubmitAviculture";
import { cityGetUserProfiles } from "../../services/city-get-user-profiles";

export const CityUsers = () => {
  const dispatch = useDispatch();
  const [dataTable, setDataTable] = useState([]);
  const navigate = useNavigate();

  const { cityUsers } = useSelector((state) => state.citySlice);

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(cityGetUserProfiles()).then((r) => {
      dispatch(LOADING_END());
    });
  }, []);

  const [justBaseUsers, setJustBaseUsers] = useState(false);

  const handleChange = (event) => {
    setJustBaseUsers(!justBaseUsers);
  };
  const [filteredData, setFilteredData] = useState(cityUsers);

  useEffect(() => {
    if (justBaseUsers) {
      const newUsers = cityUsers?.filter((item, i) => {
        return item?.profile?.role.length === 0;
      });
      setFilteredData(newUsers);
    } else {
      setFilteredData(cityUsers);
    }
    const d = filteredData?.map((item, i) => {
      return [
        i + 1,
        item?.profile?.fullname
          ? item?.profile?.fullname
          : item?.profile?.firstName + " " + item?.profile?.lastName,
        <Grid key={i}>
          {!(item?.profile?.role.length > 0) && "کاربر پایه"}
          {item?.profile?.role?.map((item, i) => {
            var name = "";
            switch (item) {
              case "ProvinceOperator":
                name = "اپراتور تخصیص استان";
                break;
              case "CityOperator":
                name = "اپراتور شهرستان";
                break;
              case "KillHouseVet":
                name = "دامپزشک کشتارگاه";
                break;
              case "VetFarm":
                name = "دامپزشک";
                break;
              case "Poultry":
                name = "مرغدار";
                break;
              case "KillHouse":
                name = "کشتارگاه";
                break;
              case "Vet":
                name = "دامپزشک";
                break;
              case "ProvinceInspector":
                name = "بازرس استان";
                break;
              case "ProvinceFinancial":
                name = "اپراتور مالی";
                break;
              case "Driver":
                name = "راننده";
                break;
              case "Admin":
                name = "ادمین";
                break;

              default:
                break;
            }
            return [<Grid key={i}>{name}</Grid>];
          })}
        </Grid>,
        item?.profile?.mobile,
        item?.profile?.baseOrder,
        item?.profile?.city,
        <Typography key="s" variant="caption">
          {item?.profile?.password}
        </Typography>,
        <Grid key={i}>
          <Tooltip key={i} title={"پرونده کاربر"} placement="right-start">
            <IconButton
              aria-label="delete"
              color="primary"
              className="avicultureActiveRequestsBtn"
              onClick={() => {
                navigate(ROUTE_CITY_USER_FILE + item?.profile?.key);
              }}
            >
              <ContactPageIcon />
            </IconButton>
          </Tooltip>
        </Grid>,
      ];
    });

    setDataTable(d);
  }, [cityUsers, justBaseUsers, filteredData]);

  return (
    <Grid
      container
      xs={12}
      alignItems={"start"}
      gap={SPACING.SMALL}
      direction={"column"}
    >
      <Grid
        width="100%"
        container
        alignItems="center"
        justifyContent="space-between"
      >
        <Grid
          alignItems="center"
          flexDirection="inherit"
          container
          mt={SPACING.MEDIUM}
          gap={SPACING.SMALL}
        >
          <Button
            className="first-step"
            variant={"contained"}
            onClick={() => {
              dispatch(
                DRAWER({
                  title: "ثبت کاربر جدید",
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  content: <CitySubmitAviculture />,
                })
              );
            }}
          >
            ثبت کاربر جدید
          </Button>

          <FormControlLabel
            mt={SPACING.SMALL}
            control={<Checkbox />}
            label="فقط نمایش کاربران پایه"
            onChange={handleChange}
          />
        </Grid>

        <Grid width="100%" className="second">
          <AdvancedTable
            expandable
            columns={[
              "ردیف",
              "نام کامل",
              "نوع کاربری",
              "شمار تلفن",
              "کد کاربری",
              "شهر",
              "کلمه عبور",
              "پرونده",
            ]}
            data={dataTable}
          />
        </Grid>
      </Grid>
    </Grid>
  );
};
