import React, { FC, useContext, useEffect, useState } from "react";
import MediaQuery from "react-responsive";
import { useRouter } from "next/router";
import _, { isEmpty } from "lodash";

import LeftPane from "./leftPane";
import RightPane from "./rightPane";
import MobileProductDetails from "./mobileProductDetails";
import { fetchProductAdditionalInfo } from "../../pages/api/product_details";
import EnquiryModal from "./rightPane/components/EnquiryModal";
import shopConetxt from "../../context/shopConetxt";
import OTPModal from "../modal/otpModal/OTPModal";
import { createBreadcrumb, getFlattenCategory } from "../globalUtils/utils";

const ProductDetails: FC<any> = ({
  productDetails,
  relatedProducts,
  review,
  stateArray
}) => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
    setCategoryBreadcrumb,
    categoryTreeNested,
  } = useContext(shopConetxt);
  const router = useRouter();
  const [productAdditionalInfo, setProductAdditionalInfo] = useState([]);
  const [isEnquiryModalOpen, setIsEnquiryModalOpen] = useState(false);
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  useEffect(() => {
    if (isEmpty(productAdditionalInfo) && productDetails.id) {
      fetchProductAdditionalInfo(productDetails.id).then((res: any) => {
        setProductAdditionalInfo(res.data);
      });
    }
    
  }, [productDetails]);

  const getAnEnquiryClick = () => {
    const val: any = localStorage.getItem("loginDetails");
    const loginDetails = JSON.parse(val);
    if (!_.isEmpty(loginDetails)) {
      setIsEnquiryModalOpen(!isEnquiryModalOpen);
    } else {
		setIsOTPModalVisible(true)
    }
  };

  const onBulkDiscountSelect = (selectedDiscount: any) => {
    console.log(selectedDiscount);
  };

  const requestCallback = (formData: any) => {
    console.log(formData);
  };

  const onBuyNowClick = () => {
    router.push("/cart");
  };

  return (
    <>
      <MediaQuery minWidth={768}>
        <div className="bg-gray-100 mt-4  min-h-screen  justify-between">
          <LeftPane
            review={review}
            productDetails={productDetails}
            relatedProducts={relatedProducts}
            requestCallback={requestCallback}
            productAdditionalInfo={productAdditionalInfo || []}
            stateArray={stateArray}
          />
          <RightPane
            productDetails={productDetails}
            getAnEnquiryClick={getAnEnquiryClick}
            onBulkDiscountSelect={onBulkDiscountSelect}
            stateArray={stateArray}
          />
        </div>
      </MediaQuery>
      <MediaQuery maxWidth={767.98}>
        <MobileProductDetails
          productDetails={productDetails}
          relatedProducts={relatedProducts}
          getAnEnquiryClick={getAnEnquiryClick}
          onBulkDiscountSelect={onBulkDiscountSelect}
          requestCallback={requestCallback}
          onBuyNowClick={onBuyNowClick}
          productAdditionalInfo={productAdditionalInfo || []}
          stateArray={stateArray}
        />
      </MediaQuery>
      {isEnquiryModalOpen ? (
        <EnquiryModal
          handleClose={() => setIsEnquiryModalOpen(false)}
          productDetails={productDetails}
        />
      ) : null}
      <OTPModal
        handleOTPClose={() => {
          setIsOTPModalVisible(false);
        }}
        isOTPModalVisible={isOTPModalVisible}
        stateArray={stateArray}
      />
    </>
  );
};

export default ProductDetails;