import {
  Box,
  Button,
  Card,
  Divider,
  Grid,
  Modal,
  Stack,
  Typography,
} from "@mui/material";
import { Formik } from "formik";
import React, { useState } from "react";
import toast from "react-hot-toast";
import * as Yup from "yup";
import { VariationProductManageFields } from "../../data/ProductManageFields";
import useProductVariationStore from "../../services/store/product/useProductVariationStore";
import VariationTable from "../common/CommonTable/VariationTable";
import SelectFieldCommon from "../common/Form/SelectFieldCommon";
import TextFieldInput from "../common/Form/TextFieldInput ";
import TextEditor from "../editor/TextEditor";
import FileUploadComponent from "../file-upload/FileUploadComponent";
import { v4 as uuidv4 } from "uuid";
import {
  getVariationTypeList,
  getVariationTypeValuesList,
} from "../../services/axios/allCommonFetchApi";
import {
  allVariationTypeQueryName,
  allVariationValueQueryName,
} from "../../utils/helper";
import { useQuery } from "@tanstack/react-query";

//Variation
const VARIATION = "variation";

// validation
const validationSchema = Yup.object({
  salesPrice: Yup.string().required("Sales price name is required"),
  editId: Yup.string(),
  apiId: Yup.number(),
  barcode: Yup.string(),
  offerPrice: Yup.string(),
  variation1: Yup.object().nullable().required("Variation type is required"),
  variation1Value: Yup.object()
    .nullable()
    .required("Variation value is required"),
});

function VariationManage() {
  const [singleFiles, setSingleFiles] = useState([]);
  const [multipleFiles, setMultipleFiles] = useState([]);
  const [isOpenShortModal, setIsOpenShortModal] = useState(false);
  const [isOpenLongModal, setIsOpenLongModal] = useState(false);
  const [storeSelectOptions, setSelectOptions] = useState({
    variation1: [],
    variation1Value: [],
  });
  // console.log("storeSelectOptions:", storeSelectOptions);
  const [shortValue, setShortValue] = useState({
    key: null,
    content: "",
  });
  const [longValue, setLongValue] = useState({
    key: null,
    content: "",
  });
  const [storeVariationValue, setStoreVariationValue] = useState(null);
  console.log(" storeVariationValue:", storeVariationValue);
  const { data: allVariationTypeList } = useQuery({
    queryKey: [allVariationTypeQueryName],
    queryFn: getVariationTypeList,
    onSuccess: (data) => {
      if (data?.success) {
        const formatData = data?.data?.map((item) => {
          return { label: item, value: item };
        });
        setSelectOptions({ ...storeSelectOptions, variation1: formatData });
      } else {
        toast.error(data?.message[0]);
      }
    },
  });
  const { isLoading: variationValueLoading, data: allVariationTypeValueList } =
    useQuery({
      queryKey: [allVariationValueQueryName, storeVariationValue],
      queryFn: () => getVariationTypeValuesList(storeVariationValue),
      onSuccess: (data) => {
        if (data?.success) {
          const formatData = data?.data?.map((item) => {
            return {
              label: item?.value,
              value: item?.id,
            };
          });
          setSelectOptions({
            ...storeSelectOptions,
            variation1Value: formatData,
          });
        } else {
          toast.error(data?.message[0]);
        }
      },
      enabled: !!storeVariationValue,
    });

  //Zustand
  const {
    items,
    isVariationEditAble,
    handleShowEditable,
    addItem,
    updateItem,
  } = useProductVariationStore();
  console.log(" items:", items);

  //Handle Short Modal
  const handleOpenShortModal = () => {
    setIsOpenShortModal(true);
  };
  const handleCloseShortModal = () => {
    setIsOpenShortModal(false);
    // setShortValue({ ...shortValue, content: "" });
  };
  const handleSubmitShortModal = () => {
    setIsOpenShortModal(false);
  };

  //Handle Long Modal
  const handleOpenLongModal = () => {
    setIsOpenLongModal(true);
  };
  const handleCloseLongModal = () => {
    setIsOpenLongModal(false);
    // setLongValue({ ...longValue, content: "" });
  };
  const handleSubmitLongModal = () => {
    setIsOpenLongModal(false);
  };

  //Reset Description
  const handleResetDescriptionImages = () => {
    setShortValue({ ...shortValue, content: "" });
    setLongValue({ ...longValue, content: "" });
    setSingleFiles([]);
    setMultipleFiles([]);
  };

  //Handle set image des
  const handleSetDesImages = (item) => {
    console.log(" item:", item);
    setSingleFiles(item?.featureImage);
    setMultipleFiles(item?.productImages);
    setShortValue({ ...shortValue, content: item?.shortDescription });
    setLongValue({ ...longValue, content: item?.longDescription });
  };

  //Cancel Edit
  const handleCancelEdit = (setFieldValue, resetForm) => {
    resetForm();
    setFieldValue("editId", "");
    setFieldValue("apiId", 0);
    setFieldValue("salesPrice", "");
    setFieldValue("offerPrice", "");
    setFieldValue("barcode", "");
    setFieldValue("variation1", "");
    setFieldValue("variation1Value", "");
    handleResetDescriptionImages();
    handleShowEditable(false);
  };

  // submit form
  const handleSubmitForm = async (data, actions) => {
    console.log(
      "handleSubmitForm - data:",
      data,
      shortValue?.content,
      longValue?.content,
      actions
    );
    if (singleFiles?.length <= 0) {
      toast.error("Features images is required");
    } else if (shortValue?.content?.length <= 0) {
      toast.error("Short description is required");
    } else {
      if (isVariationEditAble) {
        updateItem(data?.editId, {
          id: data?.editId,
          apiId: data?.apiId ? parseInt(data?.apiId) : null,
          salesPrice: parseFloat(data?.salesPrice),
          offerPrice: parseFloat(data?.offerPrice),
          barcode: data?.barcode,
          variation1: data?.variation1,
          variation1Value: data?.variation1Value,
          shortDescription: shortValue?.content,
          longDescription: longValue?.content,
          featureImage: singleFiles,
          productImages: multipleFiles,
        });
        handleCancelEdit(actions?.setFieldValue, actions?.resetForm);
      } else {
        console.log("variation add");

        addItem({
          id: uuidv4(),
          apiId: null,
          salesPrice: parseFloat(data?.salesPrice),
          offerPrice: parseFloat(data?.offerPrice),
          barcode: data?.barcode,
          variation1: data?.variation1,
          variation1Value: data?.variation1Value,
          shortDescription: shortValue?.content,
          longDescription: longValue?.content,
          featureImage: singleFiles,
          productImages: multipleFiles,
        });
        handleCancelEdit(actions?.setFieldValue, actions?.resetForm);
      }
    }
    // try {
    //   const updateResponse = await updateVendorInfo(values);
    //   if (updateResponse?.data?.success) {
    //     setToastMsg("Info updated successfully!");
    //     setToastType("success");
    //     getVendorInfo();
    //   }

    //   setSubmitting(false);
    // } catch (err) {
    //   setToastMsg("Info update failed!");
    //   setToastType("error");
    //   setSubmitting(false);
    // }
  };

  return (
    <Box>
      <Typography fontSize={{ lg: 24, md: 20, xs: 18 }}>
        Variation Create
      </Typography>
      <Divider />
      <Box>
        <Box>
          <Box>
            {/* form start */}
            <Formik
              initialValues={{ status: null }}
              validationSchema={validationSchema}
              onSubmit={(values, actions) => handleSubmitForm(values, actions)}
              // innerRef={formikRef}
            >
              {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting,
                setFieldValue,
                resetForm,
              }) => {
                return (
                  <>
                    <Box
                      component="form"
                      noValidate
                      autoComplete="off"
                      p={2}
                      onSubmit={handleSubmit}
                    >
                      <Grid container spacing={2}>
                        {VariationProductManageFields.map((field, i) => {
                          if (field?.type === "select") {
                            if (values?.variation1) {
                              setStoreVariationValue(values?.variation1?.value);
                            }
                            return (
                              <Grid item md={4} sm={6} xs={12} key={field.id}>
                                <SelectFieldCommon
                                  name={field?.name}
                                  options={
                                    field?.options
                                      ? field?.options
                                      : storeSelectOptions[field?.name]
                                  }
                                  label={field?.label}
                                  isRequired={field?.required}
                                />
                              </Grid>
                            );
                          } else if (
                            values?.type?.value === VARIATION &&
                            (field?.name === "salesPrice" ||
                              field?.name === "offerPrice" ||
                              field?.name === "barcode")
                          ) {
                            return null;
                          }
                          return (
                            <Grid item md={4} sm={6} xs={12} key={field.id}>
                              <TextFieldInput
                                name={field?.name}
                                label={field?.label}
                                isRequired={field?.required}
                              />
                            </Grid>
                          );
                        })}

                        <Grid item md={4} sm={6} xs={6}>
                          <Button
                            variant="contained"
                            color="info"
                            fullWidth
                            sx={{ mt: 1.1 }}
                            onClick={handleOpenShortModal}
                          >
                            Short Details
                          </Button>
                        </Grid>
                        <Grid item md={4} sm={6} xs={6}>
                          <Button
                            variant="contained"
                            color="info"
                            fullWidth
                            sx={{ mt: 1.1 }}
                            onClick={handleOpenLongModal}
                          >
                            Long Details
                          </Button>
                        </Grid>
                      </Grid>
                      <Box sx={{ mt: 2 }}>
                        <Grid container spacing={2}>
                          <Grid item sm={6} xs={12}>
                            <FileUploadComponent
                              files={singleFiles}
                              setFiles={setSingleFiles}
                              title={"Featured Image *"}
                            />
                          </Grid>
                          <Grid item sm={6} xs={12}>
                            <FileUploadComponent
                              files={multipleFiles}
                              setFiles={setMultipleFiles}
                              title={"Product Images"}
                              maxFiles={20}
                            />
                          </Grid>
                        </Grid>
                      </Box>
                      <Stack
                        justifyContent={"end"}
                        gap={1}
                        sx={{
                          mt: 5,
                        }}
                      >
                        {isVariationEditAble ? (
                          <Button
                            type="submit"
                            variant="outlined"
                            color="info"
                            onClick={() => {
                              handleCancelEdit(setFieldValue, resetForm);
                            }}
                          >
                            Cancel Edit
                          </Button>
                        ) : null}
                        {!isVariationEditAble ? (
                          <Button
                            type="submit"
                            variant="contained"
                            color="success"
                          >
                            Create Variation
                          </Button>
                        ) : null}
                        {isVariationEditAble ? (
                          <Button
                            type="submit"
                            variant="contained"
                            color="success"
                          >
                            Update Variation
                          </Button>
                        ) : null}
                      </Stack>
                    </Box>
                    <Box>
                      <VariationTable
                        handleSetDesImages={handleSetDesImages}
                        setFieldValue={setFieldValue}
                      />
                    </Box>
                  </>
                );
              }}
            </Formik>
          </Box>
        </Box>
      </Box>

      {/* Short Description Modal  */}
      {isOpenShortModal ? (
        <Modal
          open={isOpenShortModal}
          // onClose={handleCloseShortModal}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          sx={{
            top: "20px",
            maxWidth: 900,
            width: 1,
            mx: "auto",
          }}
        >
          <Card>
            <TextEditor value={shortValue} setValue={setShortValue} />
            <Box sx={{ p: 2, mt: 3 }}>
              <Stack justifyContent={"end"} flexWrap={"wrap"} gap={1}>
                <Button variant="outlined" onClick={handleCloseShortModal}>
                  Cancel
                </Button>
                <Button
                  variant="contained"
                  color="info"
                  onClick={handleSubmitShortModal}
                >
                  Submit
                </Button>
              </Stack>
            </Box>
          </Card>
        </Modal>
      ) : null}

      {/* Long Description Modal  */}
      {isOpenLongModal ? (
        <Modal
          open={isOpenLongModal}
          // onClose={handleCloseShortModal}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          sx={{
            top: "20px",
            maxWidth: 900,
            width: 1,
            mx: "auto",
          }}
        >
          <Card>
            <TextEditor value={longValue} setValue={setLongValue} />
            <Box sx={{ p: 2, mt: 3 }}>
              <Stack justifyContent={"end"} flexWrap={"wrap"} gap={1}>
                <Button variant="outlined" onClick={handleCloseLongModal}>
                  Cancel
                </Button>
                <Button
                  variant="contained"
                  color="info"
                  onClick={handleSubmitLongModal}
                >
                  Submit
                </Button>
              </Stack>
            </Box>
          </Card>
        </Modal>
      ) : null}
    </Box>
  );
}

export default VariationManage;