import {
  Autocomplete,
  Button,
  Checkbox,
  Chip,
  Divider,
  FormControl,
  FormControlLabel,
  FormHelperText,
  IconButton,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
} from "@mui/material";

import React, { useEffect } from "react";
import { useFormik } from "formik";

import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
import CheckIcon from "@mui/icons-material/Check";

import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";

import { useDispatch } from "react-redux";
import { useState } from "react";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import SearchIcon from "@mui/icons-material/Search";
import { useContext } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { Yup } from "../../../../lib/yup/yup";
import { cityGetCity } from "../../services/city-get-city";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { provinceCheckUserExistence } from "../../../province/services/province-check-user-existence";
import { formatJustDate } from "../../../../utils/formatTime";
import { provinceRegisterUser } from "../../../province/services/province-register-user";
import { provinceGetUserProfiles } from "../../../province/services/province-get-user-profiles";
import { cityGetProvinces } from "../../services/CityGetProvinces";

export const CitySubmitAviculture = () => {
  const [openNotif] = useContext(AppContext);

  const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);
  const [provinceKey, setProvinceKey] = useState();
  const [cityKey, setCityKey] = useState();

  const [poultryProvinceKey, setPoultryProvinceKey] = useState();
  const [poultryCityKey, setPoultryCityKey] = useState();

  const [userChecked, setUserChecked] = useState(false);

  const [isExistProvince, setIsExistProvince] = useState(true);

  const [userData, setUserData] = useState();

  const dispatch = useDispatch();

  const formik = useFormik({
    initialValues: {
      mobile: "",
      fname: "",
      lname: "",
      nationalcode: "",
      password: "",
      birthday: moment(Date()).format("YYYY-MM-DD hh:mm:ss"),
    },
    validationSchema: Yup.object({
      mobile: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به صورت عددی وارد کنید!")
        .test("len", "شماره تلفن باید با 0 شروع شود", (val, context) => {
          return context.originalValue && context.originalValue.startsWith("0");
        })
        .test("len", "شماره تماس 11 رقم باید باشد", (val, context) => {
          if (context.originalValue) {
            return context.originalValue.length === 11;
          }
        }),
      fname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      lname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      nationalcode: Yup.number()
        .required("این فیلد اجباری است!")
        .test("len", "کد ملی میبایست ده رقم باشد.", (val, context) => {
          if (context.originalValue) {
            return context.originalValue.length === 10;
          }
        }),
      password: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا مقادیر را به درستی وارد کنید!"),
    }),
  });

  // const formikPoultry = useFormik({
  //   initialValues: {
  //     uniqueID: "",
  //     poultryAddress: "",
  //     halls: "",
  //     systemCode: "",
  //     epidemiologicalCode: "",
  //     unitName: "",
  //     ownerName: "",
  //     capacity: "",
  //     licenseNumber: "",
  //     postal: "",
  //   },
  //   validationSchema: Yup.object({
  //     uniqueID: Yup.number()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //     poultryAddress: Yup.string()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به درستی وارد کنید!"),
  //     halls: Yup.number()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //     systemCode: Yup.string()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به درستی وارد کنید!"),
  //     epidemiologicalCode: Yup.string()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //     unitName: Yup.string()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به درستی وارد کنید!"),
  //     ownerName: Yup.string()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به درستی وارد کنید!"),
  //     capacity: Yup.number()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //     licenseNumber: Yup.number()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //     postal: Yup.number()
  //       .required("این فیلد اجباری است!")
  //       .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
  //   }),
  // });

  useEffect(() => {
    formik.validateForm();
    formik2.validateForm();
  }, []);

  const formik2 = useFormik({
    initialValues: {
      userInfoCheck: "",
    },
    validationSchema: Yup.object({
      userInfoCheck: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

  const [user, setUser] = React.useState();

  const handleChange = () => {
    if (user === "Poultry") {
      setUser("");
    } else {
      setUser("Poultry");
    }
  };

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(cityGetProvinces())?.then((r) => {
      dispatch(LOADING_END());
      setProvinceData(r.payload.data);
    });
  }, []);

  useEffect(() => {
    if (poultryProvinceKey) {
      dispatch(LOADING_START());
      dispatch(cityGetCity(poultryProvinceKey)).then((r) => {
        setCityData(r.payload.data);
        setIsExistProvince(false);
        dispatch(LOADING_END());
      });
    } else if (provinceKey) {
      dispatch(LOADING_START());
      dispatch(cityGetCity(provinceKey)).then((r) => {
        setCityData(r.payload.data);
        setIsExistProvince(false);
        dispatch(LOADING_END());
      });
    }
  }, [provinceKey, poultryProvinceKey]);

  const [arr, setArr] = useState([
    {
      id: 0,
      uniqueID: "",
      poultryAddress: "",
      halls: "",
      systemCode: "",
      epidemiologicalCode: "",
      unitName: "",
      capacity: "",
      licenseNumber: "",
      postal: "",
      bankName: "",
      cardNumber: "",
      accountNumber: "",
      shabaNumber: "",
      accountHolder: "",
    },
  ]);

  const addInput = () => {
    setArr((prevState) => {
      return [
        ...prevState,
        {
          id: prevState.length,
          uniqueID: "",
          poultryAddress: "",
          halls: "",
          systemCode: "",
          epidemiologicalCode: "",
          unitName: "",
          capacity: "",
          licenseNumber: "",
          postal: "",
          bankName: "",
          cardNumber: "",
          accountNumber: "",
          shabaNumber: "",
          accountHolder: "",
        },
      ];
    });
  };

  const removeInput = () => {
    const number = arr.length - 1;

    if (number !== 0) {
      const filteredArrayPrice = arr.filter((object, i) => i < number);
      // let filteredArrayTime = arrPrices.filter((object, i) => i < number);

      setArr(filteredArrayPrice);
      // setArrPrices(filteredArrayTime);
    }
  };

  const handleChangeArray = (e) => {
    const [itemName, itemIndex] = e.target.name.split("-");
    if (itemName === "uniqueID") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].uniqueID = e.target.value;
        return newState;
      });
    } else if (itemName === "poultryAddress") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].poultryAddress = e.target.value;
        return newState;
      });
    } else if (itemName === "halls") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].halls = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "systemCode") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].systemCode = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "epidemiologicalCode") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].epidemiologicalCode = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "ownerName") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].ownerName = e.target.value;
        return newState;
      });
    } else if (itemName === "unitName") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].unitName = e.target.value;
        return newState;
      });
    } else if (itemName === "capacity") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].capacity = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "licenseNumber") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].licenseNumber = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "postal") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].postal = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "bankName") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].bankName = e.target.value;
        return newState;
      });
    } else if (itemName === "cardNumber") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].cardNumber = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "accountNumber") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].accountNumber = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "shabaNumber") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].shabaNumber = Number(e.target.value);
        return newState;
      });
    } else if (itemName === "accountHolder") {
      setArr((prevState) => {
        const newState = prevState;
        newState[itemIndex].accountHolder = e.target.value;
        return newState;
      });
    }
  };

  return (
    <Grid
      container
      display="block"
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      height="100%"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        {!userChecked && (
          <>
            <Typography>بررسی کاربر</Typography>
            <Grid display="flex" width={1}>
              <TextField
                fullWidth
                id="userInfoCheck"
                label="شماره موبایل یا کد ملی"
                variant="outlined"
                value={formik2.values.userInfoCheck}
                error={
                  formik2.touched.userInfoCheck
                    ? Boolean(formik2.errors.userInfoCheck)
                    : null
                }
                onChange={formik2.handleChange}
                onBlur={formik2.handleBlur}
                helperText={
                  formik2.touched.userInfoCheck &&
                  Boolean(formik2.errors.userInfoCheck)
                    ? formik2.errors.userInfoCheck
                    : null
                }
              />

              <IconButton
                disabled={!formik2.isValid}
                aria-label="delete"
                color="primary"
                onClick={() => {
                  dispatch(LOADING_START());
                  dispatch(
                    provinceCheckUserExistence({
                      type: "check_user",
                      value: formik2.values.userInfoCheck,
                    })
                  ).then((r) => {
                    dispatch(LOADING_END());
                    if (r.error) {
                      if (r.error.message.includes("409")) {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "کاربر پیدا نشد، یک کاربر جدید بسازید!",
                          severity: "error",
                        });
                      }
                    } else {
                      if (r.payload.data) {
                        setUserData(r.payload.data.profile);
                      } else {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "مشکلی پیش آمده است!",
                          severity: "error",
                        });

                        dispatch(
                          DRAWER({
                            right: false,
                            bottom: false,
                            content: null,
                          })
                        );
                      }
                    }
                  });
                  setUserChecked(true);
                }}
              >
                <SearchIcon />
              </IconButton>
            </Grid>
            <FormHelperText>شماره موبایل با صفر شروع می‌شود!</FormHelperText>
          </>
        )}

        {userChecked && (
          <>
            {userData ? (
              <>
                <Grid
                  container
                  gap={SPACING.SMALL}
                  direction="column"
                  flex="1"
                  height="100%"
                  justifyContent="space-between"
                >
                  <Grid display="flex">
                    <Typography
                      variant="body1"
                      mr={SPACING.TINY}
                      color={(prop) => prop.palette.grey["A700"]}
                    >
                      نام کامل:
                    </Typography>
                    <Typography mr={SPACING.TINY} fontWeight="bold">
                      {userData.fullname}
                    </Typography>{" "}
                  </Grid>

                  <Grid display="flex">
                    <Typography
                      variant="body1"
                      mr={SPACING.TINY}
                      color={(prop) => prop.palette.grey["A700"]}
                    >
                      موبایل:
                    </Typography>
                    <Typography mr={SPACING.TINY} fontWeight="bold">
                      {userData.mobile}
                    </Typography>
                  </Grid>

                  <Grid display="flex">
                    <Typography
                      variant="body1"
                      mr={SPACING.TINY}
                      color={(prop) => prop.palette.grey["A700"]}
                    >
                      استان:
                    </Typography>
                    <Typography mr={SPACING.TINY} fontWeight="bold">
                      {userData.province}
                    </Typography>{" "}
                  </Grid>

                  <Grid display="flex">
                    <Typography
                      variant="body1"
                      mr={SPACING.TINY}
                      color={(prop) => prop.palette.grey["A700"]}
                    >
                      شهر:
                    </Typography>
                    <Typography mr={SPACING.TINY} fontWeight="bold">
                      {userData.city}
                    </Typography>
                  </Grid>

                  <Grid display="flex">
                    <Typography
                      variant="body1"
                      mr={SPACING.TINY}
                      color={(prop) => prop.palette.grey["A700"]}
                    >
                      تاریخ تولد:
                    </Typography>
                    <Typography mr={SPACING.TINY} fontWeight="bold">
                      {formatJustDate(userData.birthday)}
                    </Typography>
                  </Grid>
                  {userData?.role.length > 0 && (
                    <Grid display="flex">
                      <Typography
                        variant="body1"
                        mr={SPACING.TINY}
                        color={(prop) => prop.palette.grey["A700"]}
                      >
                        {userData?.role?.length > 1 ? "نقش ها:" : "نقش:"}
                      </Typography>

                      <Typography mr={SPACING.TINY} fontWeight="bold">
                        {userData?.role?.map((item, i) => {
                          let name = "";
                          switch (item) {
                            case "ProvinceOperator":
                              name = "اپراتور تخصیص استان";
                              break;
                            case "CityOperator":
                              name = "اپراتور شهرستان";
                              break;
                            case "KillHouseVet":
                              name = "دامپزشک کشتارگاه";
                              break;
                            case "Poultry":
                              name = "مرغدار";
                              break;
                            case "KillHouse":
                              name = "کشتارگاه";
                              break;
                            case "VetFarm":
                              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} display="flex" gap={SPACING.TINY}>
                              <CheckIcon color="primary" />
                              <Typography>{name}</Typography>
                            </Grid>,
                          ];
                        })}
                      </Typography>
                    </Grid>
                  )}

                  {userData?.image?.length > 5 && (
                    <>
                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          پروفایل:
                        </Typography>
                        <Grid mr={SPACING.TINY}>
                          <a href={userData.image}>
                            <img
                              width="100"
                              height="100"
                              alt="img"
                              src={userData.image}
                            />
                          </a>
                        </Grid>
                      </Grid>
                    </>
                  )}
                </Grid>
              </>
            ) : (
              <>
                <Grid>
                  <TextField
                    id="fname"
                    label="نام"
                    variant="outlined"
                    sx={{ width: "100%" }}
                    value={formik.values.fname}
                    error={
                      formik.touched.fname ? Boolean(formik.errors.fname) : null
                    }
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.fname && Boolean(formik.errors.fname)
                        ? formik.errors.fname
                        : null
                    }
                  />
                </Grid>
                <Grid>
                  <TextField
                    id="lname"
                    label="نام خانوادگی "
                    variant="outlined"
                    sx={{ width: "100%" }}
                    value={formik.values.lname}
                    error={
                      formik.touched.lname ? Boolean(formik.errors.lname) : null
                    }
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.lname && Boolean(formik.errors.lname)
                        ? formik.errors.lname
                        : null
                    }
                  />
                </Grid>
                <Grid>
                  <TextField
                    id="mobile"
                    label="موبایل"
                    variant="outlined"
                    sx={{ width: "100%" }}
                    value={formik.values.mobile}
                    error={
                      formik.touched.mobile
                        ? Boolean(formik.errors.mobile)
                        : null
                    }
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.mobile && Boolean(formik.errors.mobile)
                        ? formik.errors.mobile
                        : null
                    }
                  />
                </Grid>
                <Grid>
                  <DatePicker
                    fullWidth
                    label="تاریخ تولد"
                    id="birthday"
                    renderInput={(params) => <TextField {...params} />}
                    value={formik.values.birthday}
                    error={
                      formik.touched.birthday
                        ? Boolean(formik.errors.birthday)
                        : null
                    }
                    onChange={(e) => {
                      formik.setFieldValue(
                        "birthday",
                        moment(e).format("YYYY-MM-DD hh:mm:ss")
                      );
                    }}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.birthday && Boolean(formik.errors.birthday)
                        ? formik.errors.birthday
                        : null
                    }
                  />
                </Grid>
                <Grid>
                  <Autocomplete
                    disablePortal
                    id="province"
                    options={provinceData?.map((i) => ({
                      id: i.key,
                      label: i.name,
                    }))}
                    onChange={(e, value) => {
                      setProvinceKey(value.id);
                    }}
                    renderInput={(params) => (
                      <TextField {...params} label="استان را انتخاب  کنید" />
                    )}
                  />
                </Grid>

                <Grid>
                  <Autocomplete
                    disabled={isExistProvince}
                    disablePortal
                    id="city"
                    options={cityData?.map((i) => ({
                      id: i.key,
                      label: i.name,
                    }))}
                    onChange={(e, value) => {
                      setCityKey(value.id);
                    }}
                    renderInput={(params) => (
                      <TextField {...params} label="شهر را انتخاب  کنید" />
                    )}
                  />
                </Grid>

                <Grid>
                  <TextField
                    id="password"
                    label="رمز عبور"
                    type="password"
                    userData
                    variant="outlined"
                    sx={{ width: "100%" }}
                    value={formik.values.password}
                    error={
                      formik.touched.password
                        ? Boolean(formik.errors.password)
                        : null
                    }
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.password && Boolean(formik.errors.password)
                        ? formik.errors.password
                        : null
                    }
                  />
                </Grid>

                <Grid>
                  <TextField
                    id="nationalcode"
                    label="کد ملی"
                    variant="outlined"
                    sx={{ width: "100%" }}
                    value={formik.values.nationalcode}
                    error={
                      formik.touched.nationalcode
                        ? Boolean(formik.errors.nationalcode)
                        : null
                    }
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={
                      formik.touched.nationalcode &&
                      Boolean(formik.errors.nationalcode)
                        ? formik.errors.nationalcode
                        : null
                    }
                  />
                </Grid>
              </>
            )}

            <Divider />
            {userData && (
              <Grid>
                {!userData.role.includes("Poultry") && (
                  <FormControlLabel
                    control={<Checkbox />}
                    label="ثبت مرغداری برای این کاربر"
                    onChange={handleChange}
                  />
                )}
              </Grid>
            )}

            {/* start of poultry ============================================================================= */}

            {arr.map((item, i) => {
              return (
                <>
                  {user === "Poultry" && (
                    <>
                      <Divider>
                        <Chip label={"اطلاعات مرغدار  " + (i + 1)} />
                      </Divider>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="شناسه یکتا مرغدار"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"uniqueID-" + i}
                        />
                      </Grid>
                      <Grid>
                        <Autocomplete
                          disablePortal
                          id="province"
                          options={provinceData?.map((i) => ({
                            id: i.key,
                            label: i.name,
                          }))}
                          onChange={(e, value) => {
                            setPoultryProvinceKey(value.id);
                          }}
                          renderInput={(params) => (
                            <TextField {...params} label="استان " />
                          )}
                        />
                      </Grid>
                      <Grid>
                        <Autocomplete
                          disabled={isExistProvince}
                          disablePortal
                          id="city"
                          options={cityData?.map((i) => ({
                            id: i.key,
                            label: i.name,
                          }))}
                          onChange={(e, value) => {
                            setPoultryCityKey(value.id);
                          }}
                          renderInput={(params) => (
                            <TextField {...params} label="شهر " />
                          )}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          error={false}
                          fullWidth
                          label="آدرس مرغداری"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"poultryAddress-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="تعداد سالن"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"halls-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="کد سیستمی"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"systemCode-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="کد اپیدمیولوژیک"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"epidemiologicalCode-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          error={false}
                          fullWidth
                          label="نام واحد"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"unitName-" + i}
                        />
                      </Grid>
                      {/* <Grid>
                          <TextField
                            error={false}
                            fullWidth
                            label="نام مالک"
                            variant="outlined"
                            onChange={handleChangeArray}
                            name={"ownerName-" + i}
                          />
                        </Grid> */}
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="ظرفیت"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"capacity-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="شماره گواهی بهداشتی"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"licenseNumber-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="کد پستی"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"postal-" + i}
                        />
                      </Grid>
                      <Divider>
                        <Chip label={"اطلاعات بانکی مرغدار " + (i + 1)} />
                      </Divider>
                      <Grid>
                        <FormControl fullWidth>
                          <InputLabel id="demo-simple-select-label">
                            بانک
                          </InputLabel>
                          <Select
                            fullWidth
                            id="bankName"
                            label="بانک"
                            onChange={handleChangeArray}
                            name={"bankName-" + i}
                          >
                            <MenuItem value={"موسسه افضل توس"}>
                              موسسه افضل توس
                            </MenuItem>
                            <MenuItem value={"انصار"}>انصار</MenuItem>
                            <MenuItem value={"سپه"}>سپه</MenuItem>
                            <MenuItem value={"دی"}>دی</MenuItem>
                            <MenuItem value={"کاب"}>اقتصاد نوین</MenuItem>
                            <MenuItem value={"گردشگری"}>گردشگری</MenuItem>
                            <MenuItem value={"حکمت ایرانیان"}>
                              حکمت ایرانیان
                            </MenuItem>
                            <MenuItem value={"ایران زمین"}>ایران زمین</MenuItem>
                            <MenuItem value={"کشاورزی"}>کشاورزی</MenuItem>
                            <MenuItem value={"مسکن"}>مسکن</MenuItem>
                            <MenuItem value={"مهر ایران"}>مهر ایران</MenuItem>
                            <MenuItem value={"مهر اقتصاد"}>مهر اقتصاد</MenuItem>
                            <MenuItem value={"ملت"}>ملت</MenuItem>
                            <MenuItem value={"ملی"}>ملی</MenuItem>
                            <MenuItem value={"پارسیان"}>پارسیان</MenuItem>
                            <MenuItem value={"پاسارگاد"}>پاسارگاد</MenuItem>
                            <MenuItem value={"پست بانک ایران"}>
                              پست بانک ایران
                            </MenuItem>
                            <MenuItem value={"صادرات"}>صادرات</MenuItem>
                            <MenuItem value={"سامان"}>سامان</MenuItem>
                            <MenuItem value={"صنعت و معدن"}>
                              صنعت و معدن
                            </MenuItem>
                            <MenuItem value={"سرمایه"}>سرمایه</MenuItem>
                            <MenuItem value={"شهر"}>شهر</MenuItem>
                            <MenuItem value={"سینا"}>سینا</MenuItem>
                            <MenuItem value={"تجارت"}>تجارت</MenuItem>
                            <MenuItem value={"موسسه اعتباری توسعه"}>
                              موسسه اعتباری توسعه
                            </MenuItem>
                            <MenuItem value={"خاورمیانه"}>خاورمیانه</MenuItem>
                          </Select>
                        </FormControl>
                      </Grid>

                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="شماره کارت"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"cardNumber-" + i}
                        />
                      </Grid>

                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="شماره حساب"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"accountNumber-" + i}
                        />
                      </Grid>
                      <Grid>
                        <TextField
                          inputProps={{
                            inputMode: "numeric",
                            pattern: "[0-9]*",
                          }}
                          error={false}
                          fullWidth
                          label="شماره شبا"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"shabaNumber-" + i}
                        />
                      </Grid>

                      <Grid>
                        <TextField
                          error={false}
                          fullWidth
                          label="نام صاحب حساب"
                          variant="outlined"
                          onChange={handleChangeArray}
                          name={"accountHolder-" + i}
                        />
                      </Grid>

                      <Grid container direction="row">
                        <IconButton aria-label="delete" color="success">
                          <AddIcon onClick={addInput} />
                        </IconButton>
                        <IconButton aria-label="delete" color="secondary">
                          <DeleteIcon onClick={removeInput} />
                        </IconButton>
                      </Grid>
                    </>
                  )}
                </>
              );
            })}

            {/* end of poultry ============================================================================= */}

            <Grid mb={SPACING.SMALL}>
              <Button
                disabled={!(provinceKey || poultryProvinceKey)}
                fullWidth
                variant="contained"
                onClick={() => {
                  dispatch(LOADING_START());

                  if (userData) {
                    if (user === "Poultry") {
                      dispatch(
                        provinceRegisterUser({
                          type: "Poultry",
                          owner_key: userData.key,
                          poultry_list: arr.map((item) => {
                            return {
                              address: {
                                province_key: poultryProvinceKey,
                                city_key: poultryCityKey,
                                address: item.poultryAddress,
                                postal_code: item.postal,
                              },
                              user_bank_info: {
                                name_of_bank_user: item.accountHolder,
                                bank_name: item.bankName,
                                card: item.cardNumber,
                                shaba: item.shabaNumber,
                                account: item.accountNumber,
                              },
                              epidemiological_code: item.epidemiologicalCode,
                              system_code: item.systemCode,
                              number_of_halls: item.halls,
                              breeding_unique_id: item.uniqueID,
                              unit_name: item.unitName,
                              licence_number: item.licenseNumber,
                              total_capacity: item.capacity,
                              health_certificate_number: item.licenseNumber,
                            };
                          }),
                        })
                      ).then((r) => {
                        dispatch(LOADING_END());
                        dispatch(
                          DRAWER({ right: false, bottom: false, content: null })
                        );

                        if (r.error) {
                          if (r.error.message.includes("403")) {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "مرغداری با این مشخصات از قبل موجود است!",
                              severity: "error",
                            });
                          } else {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "مشکلی پیش آمده است!",
                              severity: "error",
                            });
                          }
                        } else {
                          openNotif({
                            vertical: "top",
                            horizontal: "center",
                            msg: "عملیات با موفقیت انجام شد.",
                            severity: "success",
                          });
                        }
                      });
                    }
                  } else {
                    dispatch(
                      provinceRegisterUser({
                        type: "profile",
                        fullname:
                          formik.values.fname + " " + formik.values.lname,
                        first_name: formik.values.fname,
                        last_name: formik.values.lname,
                        national_code: formik.values.nationalcode,
                        national_id: formik.values.national_id,
                        birthday: formik.values.birthday,
                        mobile: formik.values.mobile,
                        password: formik.values.password,
                        city: cityKey,
                        province: provinceKey,
                        image: "",
                      })
                    ).then((r) => {
                      dispatch(LOADING_END());
                      if (r.payload.error) {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: r.payload.error,
                          severity: "error",
                        });
                      } else {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "عملیات با موفقیت انجام شد.",
                          severity: "success",
                        });

                        setUserData(r.payload.data);
                      }
                    });
                    dispatch(provinceGetUserProfiles());
                  }
                }}
              >
                ثبت اطلاعات
              </Button>
            </Grid>
          </>
        )}
      </Grid>
    </Grid>
  );
};
