import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { FormControlLabel, Radio, RadioGroup, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
// import { ImageUpload } from "../../../../components/image-upload/ImageUpload";
// import { fixBase64 } from "../../../../utils/toBase64";
import { PropTypes } from "prop-types";
// import { slaughterPayProvinceFactor } from "../../services/slaughterPayProvinceFactor";
// import { useContext } from "react";
// import { AppContext } from "../../../../contexts/AppContext";
// import { slaughterUpdatePayProvinceFactor } from "../../services/slaughterUpdatePayProvinceFactor";
// import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
// import { slaughterGetPayFactorRequestsService } from "../../../slaughter-house/services/slaughter-get-pay-factor-requests";
// import { slaughterGetPaiedFactorsService } from "../../../slaughter-house/services/slaughter-get-paied-factors";
// import ImgUploader from "../../../../components/img-uploader/ImgUploader";
import { SlaughterPayFactorManual } from "../slaughter-pay-factor-manual/SlaughterPayFactorManual";
import { SlaughterPayFactorBankGateway } from "../slaughter-pay-factor-bank-gateway/SlaughterPayFactorBankGateway";

export const SlaughterPayProvinceFactorForm = ({
  factorKey,
  price,
  provinceFactorToKillHouse,
  killHouseFactorToProvince,
  isRejected,
  barCode,
  item,
}) => {
  // const [factorPaymentImages, setFactorPaymentImages] = React.useState([]);
  // const [factorPaymentImg, setFactorPaymentImg] = React.useState();
  // const dispatch = useDispatch();
  // const [roles] = useUserProfile();
  // const { id } = useParams();

  const formik = useFormik({
    initialValues: {
      paymentId: "",
      // factorPaymentImg: "",
    },
    validationSchema: Yup.object({
      paymentId: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      // factorPaymentImg: Yup.string().required("این فیلد اجباری است!"),
    }),
  });

  // const factorPaymentHandler = (imageList, addUpdateIndex) => {
  //   if (imageList[0]) {
  //     setFactorPaymentImg(fixBase64(imageList[0]?.data_url));
  //     formik.setFieldValue(
  //       "factorPaymentImg",
  //       fixBase64(imageList[0]?.data_url)
  //     );
  //   } else {
  //     formik.setFieldValue("factorPaymentImg", "");
  //   }
  //   setFactorPaymentImages(imageList);
  // };

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

  useEffect(() => {
    // fill the form if req is rejected
    if (isRejected) {
      formik.setFieldValue("paymentId", killHouseFactorToProvince.paymentCode);
    }
  }, []);

  let paymentTo = "";
  if (item?.factorPersonType === "union") {
    paymentTo = "اتحادیه";
  } else {
    paymentTo = "مرغدار";
  }

  const [selectedOption, setSelectedOption] = useState("option1");

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
      <TimelineSeparator>
        <TimelineDot color="secondary" />
        <TimelineConnector />
      </TimelineSeparator>
      <Grid container direction="column" flexWrap="nowrap" flex="1">
        <Grid container>
          <Grid>
            <TimelineOppositeContent
              variant="body1"
              fontWeight="bold"
              color="secondary"
            >
              انجام عملیات - پرداخت به {paymentTo}
            </TimelineOppositeContent>
          </Grid>
          <Grid>
            <TimelineContent color="textSecondary">
              <Grid container gap={SPACING.SMALL}>
                <Typography variant="body2" display="flex" gap={SPACING.SMALL}>
                  در این مرحله مبلغ را پرداخت کنید و شناسه پرداخت را وارد و سند
                  آن را بارگذاری کنید.
                </Typography>
              </Grid>
            </TimelineContent>
          </Grid>
        </Grid>
        <Grid>
          <RadioGroup
            aria-labelledby="radio-group-label"
            name="radio-buttons-group"
            value={selectedOption}
            onChange={handleChange}
          >
            <FormControlLabel
              value="bank-gateway"
              control={<Radio />}
              label="پرداخت از طریق درگاه پرداخت"
            />
            <FormControlLabel
              value="manual-payment"
              control={<Radio />}
              label="ثبت سند پرداخت"
            />
          </RadioGroup>
        </Grid>
        <Grid>
          {selectedOption === "bank-gateway" && (
            <SlaughterPayFactorBankGateway />
          )}
          {selectedOption === "manual-payment" && (
            <SlaughterPayFactorManual
              price={price}
              provinceFactorToKillHouse={provinceFactorToKillHouse}
              barCode={barCode}
              isRejected={isRejected}
              killHouseFactorToProvince={killHouseFactorToProvince}
            />
          )}
        </Grid>
      </Grid>
    </TimelineItem>
  );
};

SlaughterPayProvinceFactorForm.propTypes = {
  factorKey: PropTypes.string,
  price: PropTypes.any,
  provinceFactorToKillHouse: PropTypes.any,
  killHouseFactorToProvince: PropTypes.any,
  isRejected: PropTypes.any,
};
