import {
  Box,
  Button,
  Card,
  CircularProgress,
  Grid,
  Modal,
  Stack,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Formik } from "formik";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import toast from "react-hot-toast";
import * as Yup from "yup";
import SelectFieldCommon from "../../../../components/common/Form/SelectFieldCommon";
import TextFieldInput from "../../../../components/common/Form/TextFieldInput ";
import PageHeader from "../../../../components/common/PageHeader";
import ToastSnackbar from "../../../../components/common/toast-snackbar/ToastSnackbar";
import TextEditor from "../../../../components/editor/TextEditor";
import FileUploadComponent from "../../../../components/file-upload/FileUploadComponent";
import VariationManage from "../../../../components/product/VariationManage";
import { ProductManageFields } from "../../../../data/ProductManageFields";
import {
  getAllBrandList,
  getAllCategoryList,
  getAllUnitList,
} from "../../../../services/axios/allCommonFetchApi";
import {
  addSingleProductManage,
  addVariationProductManage,
  getProductViewManageList,
} from "../../../../services/axios/productFetchApi";
import useProductVariationStore from "../../../../services/store/product/useProductVariationStore";
import {
  activeStatus,
  allBrandQueryName,
  allCategoryQueryName,
  allUnitsQueryName,
  convertToBase64,
  productListQueryName,
  productViewListQueryName,
} from "../../../../utils/helper";

//Variation
const VARIATION = "variation";

// validation
const validationSchema = Yup.object({
  name: Yup.string().required("Product name is required"),
  salesPrice: Yup.string().when("type", {
    is: (val) => val?.value === "single",
    then: () => Yup.string().required("Sales price is required"),
    otherwise: () => Yup.string(),
  }),
  code: Yup.string(),
  barcode: Yup.string(),
  offerPrice: Yup.string(),
  type: Yup.object().nullable().required("Type is required"),
  unit: Yup.object().nullable().required("Unit name is required"),
  status: Yup.object().nullable().required("Status is required"),
  brand: Yup.object().nullable(),
  category: Yup.object().nullable(),
});

function ProductEdit() {
  const [singleFiles, setSingleFiles] = useState([]);
  const [multipleFiles, setMultipleFiles] = useState([]);
  const [singlePathFiles, setSinglePathFiles] = useState([]);
  const [multiplePathFiles, setMultiplePathFiles] = useState([]);
  const [isOpenShortModal, setIsOpenShortModal] = useState(false);
  const [isOpenLongModal, setIsOpenLongModal] = useState(false);
  const [shortValue, setShortValue] = useState({
    key: null,
    content: "",
  });
  const [longValue, setLongValue] = useState({
    key: null,
    content: "",
  });
  const [storeSelectOptions, setSelectOptions] = useState({
    unit: [],
    category: [],
    brand: [],
  });
  const [toastMsg, setToastMsg] = useState("");
  const [toastType, setToastType] = useState("");

  //Router
  const router = useRouter();

  const { data: allUnitsList } = useQuery({
    queryKey: [allUnitsQueryName],
    queryFn: getAllUnitList,
    onSuccess: (data) => {
      if (data?.success) {
        const formatData = data?.data?.map((item) => {
          return { label: item?.name, value: item?.id };
        });
        setSelectOptions({ ...storeSelectOptions, unit: formatData });
      } else {
        toast.error(data?.message[0]);
      }
    },
  });
  const { data: allBrandList } = useQuery({
    queryKey: [allBrandQueryName],
    queryFn: getAllBrandList,
    onSuccess: (data) => {
      if (data?.success) {
        const formatData = data?.data?.map((item) => {
          return { label: item?.name, value: item?.id };
        });
        setSelectOptions({ ...storeSelectOptions, brand: formatData });
      } else {
        toast.error(data?.message[0]);
      }
    },
  });
  const { data: allCategoryList } = useQuery({
    queryKey: [allCategoryQueryName],
    queryFn: getAllCategoryList,
    onSuccess: (data) => {
      if (data?.success) {
        const formatData = data?.data?.map((item) => {
          return { label: item?.name, value: item?.id };
        });
        setSelectOptions({ ...storeSelectOptions, category: formatData });
      } else {
        toast.error(data?.message[0]);
      }
    },
  });
  const { data: productViewListData } = useQuery({
    queryKey: [productViewListQueryName, router?.query?.id],
    queryFn: () => getProductViewManageList(parseInt(router?.query?.id)),
    onSuccess: (data) => {
      if (data?.success) {
        setShortValue({
          ...shortValue,
          content: data?.data?.sku[0]?.product_detail?.short_detail,
        });
        setLongValue({
          ...longValue,
          content: data?.data?.sku[0]?.product_detail?.long_detail,
        });
        setSinglePathFiles([
          {
            id: data?.data?.sku[0]?.product_images[0]?.id,
            path: data?.data?.sku[0]?.product_images[0]?.image,
          },
        ]);
        setMultiplePathFiles(
          data?.data?.sku[0]?.product_images?.slice(1)?.map((item) => {
            return {
              id: item?.id,
              path: item?.image,
            };
          }) || []
        );
      } else {
        toast.error(data?.message[0]);
      }
    },
  });

  //Context
  const queryClient = useQueryClient();

  //Zustand
  const { items } = useProductVariationStore();
  // console.log("ProductAdd - items:", items);

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

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

  // submit form
  const handleSubmitForm = async (data) => {
    console.log(
      "handleSubmitForm - values:",
      data,
      shortValue?.content,
      longValue?.content,
      singleFiles,
      multipleFiles
    );
    if (data?.type?.value === "single") {
      if (singleFiles?.length <= 0) {
        toast.error("Features images is required");
      } else if (shortValue?.content?.length <= 0) {
        toast.error("Short description is required");
      } else {
        const singleFormData = new FormData();
        singleFormData.append("name", data?.name);
        singleFormData.append("code", data?.code);
        singleFormData.append("type", data?.type?.value);
        singleFormData.append("status", data?.status?.value);
        singleFormData.append("fk_unit_id", parseInt(data?.unit?.value));
        singleFormData.append("fk_brand_id", parseInt(data?.brand?.value));
        singleFormData.append(
          "fk_category_id",
          parseInt(data?.category?.value)
        );
        singleFormData.append("sale_price", parseFloat(data?.salesPrice) || 0);
        singleFormData.append("offer_price", parseFloat(data?.offerPrice) || 0);
        singleFormData.append("barcode", data?.barcode);
        singleFormData.append("short_detail", shortValue?.content);
        singleFormData.append("long_detail", longValue?.content);

        //Send features image
        if (singleFiles?.length > 0) {
          singleFormData.append("image", singleFiles[0]);
        }

        //Send Product  images
        if (multipleFiles?.length > 0) {
          multipleFiles?.map((item, index) => {
            singleFormData.append(`product_images[${index}]`, item);
          });
        }
        singleProductMutation.mutate(singleFormData);
      }
    } else {
      if (items?.length <= 0) {
        toast.error("Please add at least one variation");
      } else {
        console.log("===== variation");

        const storeFormatData = items?.map(async (row, index) => {
          //Send features image
          let featuresImage = "";
          if (row?.featureImage?.length > 0) {
            featuresImage = await convertToBase64(row?.featureImage[0]);
          }

          //Send Product  images
          const storeProductImage = [];
          if (row?.productImages?.length > 0) {
            row?.productImages?.map(async (innerRow, innerIndex) => {
              const getBase = await convertToBase64(innerRow);
              storeProductImage.push(getBase);
            });
          }

          return {
            short_detail: row?.shortDescription,
            long_detail: row?.longDescription,
            sale_price: row?.salesPrice,
            offer_price: row?.offerPrice,
            barcode: row?.barcode,
            variation_one_id: row?.variation1?.value?.toString(),
            variation_two_id: row?.variation1Value?.value?.toString(),
            image: featuresImage,
            product_images: storeProductImage,
          };
        });
        const results = await Promise.all(storeFormatData);
        variationProductMutation.mutate({
          name: data?.name,
          code: data?.code,
          type: data?.type?.value,
          status: data?.status?.value,
          fk_unit_id: parseInt(data?.unit?.value),
          fk_brand_id: parseInt(data?.brand?.value),
          fk_category_id: parseInt(data?.category?.value),
          variations: JSON.stringify(results),
        });
      }
    }
  };

  //Add single mutation
  const singleProductMutation = useMutation({
    mutationFn: addSingleProductManage,
    onSuccess: (data) => {
      if (data?.success) {
        toast.success(`Product added successfully`);
        queryClient.invalidateQueries({ queryKey: [productListQueryName] });
        router.push("/my-products");
      }
    },
  });

  //Add variation mutation
  const variationProductMutation = useMutation({
    mutationFn: addVariationProductManage,
    onSuccess: (data) => {
      if (data?.success) {
        toast.success(`Product added successfully`);
        queryClient.invalidateQueries({ queryKey: [productListQueryName] });
        router.push("/my-products");
      }
    },
  });

  return (
    <Box>
      <PageHeader title={"Edit Products"} />
      <Card sx={{ borderRadius: "12px" }}>
        <Box>
          <Box>
            {/* form start */}
            <Formik
              initialValues={{
                name: productViewListData?.data?.name,
                salesPrice: productViewListData?.data?.sku[0]?.sale_price,
                code: productViewListData?.data?.code,
                barcode: productViewListData?.data?.sku[0]?.barcode,
                offerPrice: productViewListData?.data?.sku[0]?.offer_price,
                type: {
                  label:
                    productViewListData?.data?.type === VARIATION
                      ? "Variation"
                      : "Single",
                  value: productViewListData?.data?.type,
                },
                unit: {
                  label: productViewListData?.data?.unit?.name,
                  value: productViewListData?.data?.unit?.id,
                },
                status: {
                  label:
                    productViewListData?.data?.sku[0]?.status === activeStatus
                      ? "Active"
                      : "Inactive",
                  value: productViewListData?.data?.sku[0]?.status,
                },
                brand: {
                  label: productViewListData?.data?.brand?.name,
                  value: productViewListData?.data?.brand?.id,
                },
                category: {
                  label: productViewListData?.data?.category?.name,
                  value: productViewListData?.data?.category?.id,
                },
              }}
              validationSchema={validationSchema}
              onSubmit={(values, { setSubmitting }) =>
                handleSubmitForm(values, setSubmitting)
              }
              enableReinitialize={true}
              // innerRef={formikRef}
            >
              {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting,
                setFieldValue,
              }) => {
                // console.log(" errors:", errors);
                return (
                  <>
                    <Box
                      component="form"
                      noValidate
                      autoComplete="off"
                      p={2}
                      onSubmit={handleSubmit}
                    >
                      <Grid container spacing={2}>
                        {ProductManageFields.map((field, i) => {
                          if (field?.type === "select") {
                            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>
                          );
                        })}
                        {values?.type?.value !== VARIATION ? (
                          <>
                            <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 item sm={6} xs={12}>
                              <FileUploadComponent
                                files={singleFiles}
                                setFiles={setSingleFiles}
                                title={"Featured Image *"}
                                path={singlePathFiles}
                              />
                            </Grid>
                            <Grid item sm={6} xs={12}>
                              <FileUploadComponent
                                files={multipleFiles}
                                setFiles={setMultipleFiles}
                                title={"Product Images"}
                                maxFiles={20}
                                path={multiplePathFiles}
                              />
                            </Grid>
                          </>
                        ) : null}
                      </Grid>
                      <Box
                        display={"flex"}
                        justifyContent={"end"}
                        gap={1}
                        sx={{
                          mt: 10,
                        }}
                      >
                        <Button
                          type="submit"
                          variant="contained"
                          color="success"
                          disabled={
                            singleProductMutation?.isLoading ||
                            variationProductMutation?.isLoading
                          }
                        >
                          Add Product
                        </Button>
                      </Box>
                    </Box>
                    {values?.type?.value === VARIATION ? (
                      <Box sx={{ mt: 2, p: 2 }}>
                        <VariationManage />
                      </Box>
                    ) : null}
                  </>
                );
              }}
            </Formik>
          </Box>
        </Box>
      </Card>

      {/* Short Description Modal  */}
      <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={handleCloseShortModal}
              >
                Submit
              </Button>
            </Stack>
          </Box>
        </Card>
      </Modal>

      {/* Long Description Modal  */}
      <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={handleCloseLongModal}
              >
                Submit
              </Button>
            </Stack>
          </Box>
        </Card>
      </Modal>

      {/* toast */}
      {toastMsg !== "" && (
        <ToastSnackbar
          toastMsg={toastMsg}
          setToastMsg={setToastMsg}
          severity={toastType !== "" ? toastType : "info"}
        />
      )}
    </Box>
  );
}

export default ProductEdit;