import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { Button, TextField, Autocomplete, Typography } from "@mui/material";
import { provinceChainsSubmitCompany } from "../../services/province-chains-submit-company";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { provinceChainsEditCompany } from "../../services/province-chains-edit-company";
import { provinceChainsGetCompanies } from "../../services/province-chains-get-companies";
import {
  slaughterGetCitiesService,
  slaughterGetProvinceService,
} from "../../../slaughter-house/services/slaughter-get-provinces";

export const ChainsCompaniesSubmit = ({ item }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);

  const formik = useFormik({
    initialValues: {
      mobile: item?.user?.mobile ? item?.user?.mobile : "",
      name: item?.name ? item?.name : "",
      firstname: item?.user?.firstName ? item?.user?.firstName : "",
      lastname: item?.user?.lastName ? item?.user?.lastName : "",
      natioanlId: item?.user?.nationalId ? item?.user?.nationalId : "",
      postal: item?.postalCode ? item?.postalCode : "",
      province: item?.province ? item?.province : "",
      city: item?.city ? item?.city : "",
      address: item?.address ? item?.address : "",
    },
    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;
          }
        }),
      name: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      firstname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      lastname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      province: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      city: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      address: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      natioanlId: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      postal: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
    }),
  });

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

  useEffect(() => {
    dispatch(slaughterGetProvinceService()).then((r) => {
      setProvinceData(r.payload.data);
    });
  }, []);

  useEffect(() => {
    if (formik.values.province) {
      setCityData(
        [],
        dispatch(slaughterGetCitiesService(formik.values.province)).then(
          (r) => {
            setCityData(r.payload.data);
          }
        )
      );
    }
  }, [formik.values.province]);

  return (
    <Grid
      container
      gap={SPACING.SMALL}
      direction="column"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <Grid>
          <TextField
            fullWidth
            id="name"
            label="نام شرکت"
            variant="outlined"
            value={formik.values.name}
            error={formik.touched.name ? Boolean(formik.errors.name) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.name && Boolean(formik.errors.name)
                ? formik.errors.name
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            fullWidth
            id="firstname"
            label="نام مدیرعامل"
            variant="outlined"
            value={formik.values.firstname}
            error={
              formik.touched.firstname ? Boolean(formik.errors.firstname) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.firstname && Boolean(formik.errors.firstname)
                ? formik.errors.firstname
                : null
            }
          />
        </Grid>

        <Grid>
          <TextField
            fullWidth
            id="lastname"
            label="نام خانوادگی مدیرعامل"
            variant="outlined"
            value={formik.values.lastname}
            error={
              formik.touched.lastname ? Boolean(formik.errors.lastname) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.lastname && Boolean(formik.errors.lastname)
                ? formik.errors.lastname
                : null
            }
          />
        </Grid>

        <Grid>
          <TextField
            fullWidth
            id="mobile"
            label="موبایل"
            variant="outlined"
            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>
          <Autocomplete
            style={{ width: "100%" }}
            disablePortal
            id="province"
            options={
              provinceData
                ? provinceData.map((i) => ({ id: i.name, label: i.name }))
                : []
            }
            onChange={(e, value) => {
              formik.setFieldValue("province", value ? value.id : "");
              formik.setFieldValue("city", "");
            }}
            renderInput={(params) => (
              <TextField {...params} label="استان را انتخاب کنید" />
            )}
          />
          {item && (
            <Typography variant="caption" color="error">
              استان: {formik.values.province}
            </Typography>
          )}
        </Grid>
        <Grid>
          <Autocomplete
            minWidth={210}
            style={{ width: "100%" }}
            disabled={!formik.values.province}
            disablePortal
            id="city"
            options={
              cityData
                ? cityData.map((i) => ({ id: i.name, label: i.name }))
                : []
            }
            onChange={(e, value) => {
              formik.setFieldValue("city", value ? value.id : "");
            }}
            renderInput={(params) => (
              <TextField {...params} label="شهر را انتخاب کنید" />
            )}
          />
          {item && (
            <Typography variant="caption" color="error">
              شهر: {formik.values.city}
            </Typography>
          )}
        </Grid>

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

        <Grid>
          <TextField
            fullWidth
            id="address"
            label="آدرس"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.address}
            error={
              formik.touched.address ? Boolean(formik.errors.address) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.address && Boolean(formik.errors.address)
                ? formik.errors.address
                : null
            }
          />
        </Grid>

        <Grid>
          <TextField
            fullWidth
            id="postal"
            label="کد پستی"
            variant="outlined"
            value={formik.values.postal}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.postal ? Boolean(formik.errors.postal) : null}
            helperText={
              formik.touched.postal && Boolean(formik.errors.postal)
                ? formik.errors.postal
                : null
            }
          />
        </Grid>
      </Grid>
      <Grid>
        <Button
          variant="contained"
          fullWidth
          onClick={() => {
            if (item) {
              dispatch(
                provinceChainsEditCompany({
                  city: formik.values.city,
                  province: formik.values.province,
                  mobile: formik.values.mobile,
                  first_name: formik.values.firstname,
                  last_name: formik.values.lastname,
                  national_id: formik.values.natioanlId,
                  address: formik.values.address,
                  postal_code: formik.values.postal,
                  name: formik.values.name,
                  company_key: item?.key,
                })
              ).then((r) => {
                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  dispatch(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                  dispatch(provinceChainsGetCompanies());
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            } else {
              dispatch(
                provinceChainsSubmitCompany({
                  city: formik.values.city,
                  province: formik.values.province,
                  mobile: formik.values.mobile,
                  first_name: formik.values.firstname,
                  last_name: formik.values.lastname,
                  national_id: formik.values.natioanlId,
                  address: formik.values.address,
                  postal_code: formik.values.postal,
                  name: formik.values.name,
                })
              ).then((r) => {
                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  dispatch(provinceChainsGetCompanies());
                  dispatch(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            }
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
