import React, { FC, useContext, useEffect, useState } from "react";
import Link from "next/link";
import cx from "classnames";
import { Rate, Button, notification, Spin } from "antd";
import {
  CheckCircleFilled,
  PlusOutlined,
  MinusOutlined,
} from "@ant-design/icons";

import styles from "./productCard.module.scss";
import * as AddToCardApi from "../../../pages/api/addTocart";
import * as CartApi from "../../../pages/api/cart";
import * as CommonApi from "../../../pages/api/common";
import * as ShipApi from "../../../pages/api/ship";
import { useRouter } from "next/router";
import _, { get } from "lodash";
import shopConetxt from "../../../context/shopConetxt";
import MobileHeader from "../../home/mobile/mobileHeader/MobileHeader";
import { APIKEY, baseUrl } from "../../../constants/urls";
import RequestQuoteModal from "../../productDetails/leftPane/components/RequestQuoteModal";
import { BaseCal, amountCommaSeperate, getDiscountPercent } from "../../../constants/commonFunction";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import Geocode from "react-geocode";
const MobileView: FC<any> = ({
  product,
  itemCount,
  selectRequestQuote,
  handleRouteChangeStart,
  handleRouteChangeEnd,
  setIsLoading,
  currentAddress,
  latitude,
  longitude
}) => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
    categoryTreeNested,
    setCategoryBreadcrumb,
  } = useContext(shopConetxt);
  const router = useRouter();
  const [loginRes, setLoginRes] = useState<any>({});
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [isCartModalVisible, setIsCartModalVisble] = useState(false);

  const [isRequestQuoteModalOpen, setIsRequestQuoteModalOpen] = useState(false);
  const [productDetails, setProductDetails] = useState<any>({});
  // const [latitude, setLatitude] = useState(null);
  // const [longitude, setLongitude] = useState(null);
  // const [currentAddress, setCurrentAddress] = useState<any>({});

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const cityPincode = localStorage.getItem("PinCode");
    // if (!details?.data) {
    //   if (cityPincode !== null) {
    //     Geocode.setApiKey(APIKEY);
    //     Geocode.enableDebug();
    //     Geocode.fromAddress(cityPincode).then(({ results }) => {
    //       const { lat, lng } = results[0].geometry.location;
    //       setLatitude(lat);
    //       setLongitude(lng);
    //     });
    //   }
    //   CommonApi.getRequestWithToken(
    //     `${baseUrl}/api/customer-pincodes/get-data?token=true&customer_id=${details?.data?.id}`,
    //     details?.token
    //   ).then((Selectres) => {
    //     setCurrentAddress(Selectres?.data?.data);
    //   });
    // }
  }, []);
  const addToCart = (product: any) => {
    // console.log('====================================')
    // console.log(handleRouteChangeStart)
    // console.log('====================================')
    setIsCartLoading(true);
    setIsLoading(true);
    // handleRouteChangeStart();
    const cityPincode = localStorage.getItem("PinCode");
    if (cityPincode!=undefined && cityPincode!=null && cityPincode!="undefined")  {
      const lat = loginRes?.data ? currentAddress?.latitude : latitude;
      const long = loginRes?.data ? currentAddress?.longitude : longitude;
      CommonApi.getRequest(
        `${baseUrl}/api/inventory-by-pincode?product_id=${product.id}&pincode=${cityPincode}`
      ).then((res) => {
        ShipApi.shippingAvailableCheckingAPI(
          loginRes?.token,
          res?.data?.data?.inventory_details?.pincode,
          cityPincode,
          product?.weight * product?.moq
        ).then((shipRocket) => {
          if(shipRocket?.status){
          const params = {
            product_id: product.id,
            quantity: get(productQuantity, [product.id], product.moq),
            token: loginRes?.token,
            mp_seller_id: product.mp_seller_id,
            vendor_id: product.vendor_id,
            shipping_type: product.id==368707 || product.id==368706 || product.id==368708 || product.id==368709 ? 2:0,
            moq: product.moq,

            shipCharge: product.id==368707 || product.id==368706 || product.id==368708 || product.id==368709 ? 0:shipRocket?.rate,

            seller_lat: res?.data?.data?.inventory_details?.latitude,
            seller_lang: res?.data?.data?.inventory_details?.longitude,
            customer_lat: lat,
            gst:product?.gst,
            customer_lang: long,
            customer_pincode: cityPincode,
            manufacturer_label:product?.manufacturer_label,
            seller_pincode: res?.data?.data?.inventory_details?.pincode,
            item_weight:  product?.weight
          };
          AddToCardApi.addToCart(params).then((res) => {
            //  handleRouteChangeEnd()
            setIsLoading(false);
            if (res?.message) {
              setProductQuantity({
                id: product.id,
                quantity: get(productQuantity, [product.id], product.moq),
              });
              notification.success({
                message: res?.message,
                duration: 1,
              });
            } else {
              notification.error({
                message: res?.error,
                duration: 0,
              });
            }

            const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
            CartApi.cartFetch(tokenData).then((cartRes) => {
              setIsCartLoading(false);
              if (cartRes.data !== null) {
                setProductInvoice(cartRes.data);
                setCartItems(cartRes.data);
                <MobileHeader item={cartRes.data.items.length} />;
              }
            });
          });
        }else{
          notification.error({message:"Please enter the pin code to check delivery availability"})
        }
        });
      });
    } else {
      setIsLoading(false);
      setIsCartLoading(false);
      notification.error({ message: "Please enter the pin code to check delivery availability" });
    }
  };
  const decreaseCount = (prodct: any) => {
    if (get(productQuantity, [prodct.id], prodct.moq) > 1) {
      setProductQuantity({
        id: prodct.id,
        quantity: get(productQuantity, [prodct.id]) - 1,
      });
    }
  };
  const getCartQuantity = (productId: any) => {
    return get(productQuantity, [productId.id], productId.moq);
  };

  const buyNow = (item: any) => {
    setIsCartLoading(true);
    setIsLoading(true);
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    const cityPincode = localStorage.getItem("PinCode");
    if (cityPincode!=undefined && cityPincode!=null && cityPincode!="undefined")  {
      const lat = loginRes?.data ? currentAddress?.latitude : latitude;
      const long = loginRes?.data ? currentAddress?.longitude : longitude;
      CommonApi.getRequest(
        `${baseUrl}/api/inventory-by-pincode?product_id=${item.id}&pincode=${cityPincode}`
      ).then((res) => {
        ShipApi.shippingAvailableCheckingAPI(
          loginRes?.token,
          res?.data?.data?.inventory_details?.pincode,
          cityPincode,
          item?.weight * item?.moq
        ).then((shipRocket) => {
          if(shipRocket?.status){
          const params = {
            product_id: item.id,
            quantity: get(productQuantity, [item.id], item.moq),
            token: details?.token,
            vendor_id: item.vendor_id,
            mp_seller_id: item.mp_seller_id,
            shipping_type: item.id==368707 || item.id==368706 || item.id==368708 || item.id==368709 ? 2:0,
            moq: item.moq,
            shipCharge: item.id==368707 || item.id==368706 || item.id==368708 || item.id==368709 ?0:shipRocket?.rate,
            seller_lat: res?.data?.data?.inventory_details?.latitude,
            seller_lang: res?.data?.data?.inventory_details?.longitude,
            customer_lat: lat,
            customer_lang: long,
            gst:item?.gst,
            customer_pincode: cityPincode,
            manufacturer_label:item?.manufacturer_label,
            seller_pincode: res?.data?.data?.inventory_details?.pincode,
            item_weight:  item?.weight
          };
          AddToCardApi.addToCart(params).then((res) => {
            // handleRouteChangeEnd()
            if (res?.message) {
              notification.success({
                message: res?.message,
                duration: 1,
              });
              const tokenData: any = !_.isEmpty(loginRes)
                ? loginRes.token
                : null;
              CartApi.cartFetch(tokenData).then((cartRes) => {
                setIsCartLoading(false);
                setIsLoading(false);
                if (cartRes.data !== null) {
                  setProductInvoice(cartRes.data);
                  setCartItems(cartRes.data);
                  router.push("/cart");
                }
              });
            } else {
              notification.error({
                message: res?.error,
                duration: 0,
              });
            }
          });
        }else{
          notification.error({message:"Please enter the pin code to check delivery availability"})
        }
        });
      
      });
    } else {
      setIsLoading(false);
      setIsCartLoading(false);
      notification.error({ message: "Please enter the pin code to check delivery availability" });
    }
  };

  const increaseQuantity = (prodct: any) => {
    setProductQuantity({
      id: prodct.id,
      quantity: get(productQuantity, [prodct.id], parseInt(product.moq)) + 1,
    });
  };

  const bredCrumb = (prod: any) => {
    const flattenCategory = getFlattenCategory(categoryTreeNested);
    const breadCrumbData = createBreadcrumb(
      prod.last_category,
      flattenCategory
    );
    localStorage.setItem("breadCrumbData", JSON.stringify(breadCrumbData));
    setCategoryBreadcrumb(breadCrumbData);
  };

  const redirectUrl = (product: any) => {
    router.push(
      {
        pathname: `/products/details/${product.url_key}-${product.product_id}`,

        query: {
          reviews: "reviews",
        },
      },
      `/products/details/${product.url_key}-${product.product_id}`
    );
  };

  return (
    <>
      <div
        className={cx("flex justify-between items-center", styles.mobileCard)}
      >
        <div
          onClick={() => {
            bredCrumb(product);
          }}
        >
          <Link href={`/products/details/${product.url_key}-${product.product_id}`}>
            <a
              onClick={() => {
                bredCrumb(product);
              }}
            >
              <div className={styles.imageDiscountGrid}>
                {/* <div className={styles.discountMain}>
                  {parseInt(product.special_price) > 0  && getDiscountPercent(product)>0? (
                    product?.special_price ? (
                      <div className={styles.discountMobileButton}>
                        {`${getDiscountPercent(product)}% OFF`}
                      </div>
                    ) : null
                  ) : null}
                </div> */}
                {product?.base_image === null ? (
                  <img
                    src={baseUrl + "/" + product?.default_image}
                    className={cx(styles.mobileImage)}
                    alt="no image found"
                  />
                ) : (
                  <img
                    className={cx(styles.mobileImage)}
                    src={product?.s3_base_url + product?.base_image}
                    alt="no image found"
                  />
                )}
              </div>
            </a>
          </Link>
        </div>

        <div className={styles.productDetailsMobile}>
          <div
            onClick={() => {
              bredCrumb(product);
            }}
          >

            <Link href={`/products/details/${product.url_key}-${product.product_id}`}>
              <a
                onClick={() => {
                  bredCrumb(product);
                }}
              >
                
                  <div className={styles.mobileCardDescription}>
                    {product?.name}
                  </div>
                  {/* <div className={cx("flex")}>
              <div className={cx(styles.description, "truncate")}>
                {product.brand_label || " brand not found"}
              </div>
              <div
                className={cx(
                  styles.nameAndDescription,
                  "ml-1 flex items-center"
                )}
              >
                <CheckCircleFilled className={cx(styles.darkGreen, "mr-1")} />
                <div className={cx("text-green-900", styles.font10px)}>
                  Verified
                </div>
				
              </div>
            </div> */}
           
              </a>
              </Link>
              <div className={cx(styles.description,"py-1")}>
                <span style={{color:"#888888"}}>SKU </span><a style={{color:"#000"}} onClick={()=>{navigator.clipboard.writeText(product.sku)}}>{`${product.sku}`}</a>
              </div>
              <Link href={`/products/details/${product.url_key}-${product.product_id}`}>
              <a
                onClick={() => {
                  bredCrumb(product);
                }}
              >
                  <div
                    className="flex cursor-pointer"
                    onClick={() => {
                      redirectUrl(product);
                    }}
                  >
                    <Rate
                      disabled
                      className={styles.rateComponent}
                      allowHalf
                      value={product?.avg_rating}
                    />
                    <div className={styles.reviewsLabel}>{`${parseInt(
                      product?.total_rating
                    )} Review (s)`}</div>
                  </div>
                  <div className={cx(styles.description, "truncate ")}>
                    <a>{`By ${
                      product.seller_code || "Vendor not found"
                    }`}</a>
                  </div>
                  {/* {product.special_price === 0 ? null : (
                    <div className="flex items-center">
                      <div className={cx(styles.originalPrice, "mr-1 mt-1")}>
                        ₹{amountCommaSeperate(parseFloat(product?.regular_price).toFixed(2))}
                      </div>
                     
                      <div className="flex items-center">
                        <div className={styles.discountedPrice}>
                          {product.special_price === "" ||
                          product.special_price === null ||
                          product.special_price === 0
                            ? `₹${amountCommaSeperate(parseFloat(product.price).toFixed(2))}`
                            : `₹${amountCommaSeperate(parseFloat(get(product, "special_price")).toFixed(2))}`
                           
                              }
                        </div>
                        <div className={cx(styles.subDescription, "ml-2 mt-1")}>
                          Exc. of GST
                        </div>
                      </div>
                    </div>
                  )} */}
              
              </a>
            </Link>
          </div>
          {/* {product.special_price == 0  ? ( */}
            <Button
              type="primary"
              block
              className="my-2 "
              onClick={() => selectRequestQuote(product)}
            >
              Request for Quote
            </Button>
          {/* ) : (
            <div>
              <div className="flex items-center justify-between">
                
                <Button
                  onClick={() => {
                    addToCart(product);
                  }}
                  className={cx(styles.addToCartBtn, "secondaryButton")}
                  size="middle"
                  type="primary"
                  block
                >
                 ADD TO CART
                </Button>
                <Button
                  size="middle"
                  className={"ml-2 w-full mt-1"}
                  type="primary"
                  style={{ height: "38px" }}
                  onClick={() => {
                    buyNow(product);
                  }}
                >
                 BUY NOW
                </Button>
              </div>
              <div>
                
              </div>
            </div>
          )} */}
        </div>
      </div>
    </>
  );
};

export default MobileView;