import React, { FC, useCallback, useState, useContext, useEffect } from "react";
import cx from "classnames";
import { Rate, Button, notification } from "antd";
import isEmpty from "lodash/isEmpty";
import get from "lodash/get";
import Link from "next/link";
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 CartModal from "../../modal/cartModal/CartModal";
import shopConetxt from "../../../context/shopConetxt";
import {
  getIncreaseQuantityPayload,
  getDecreaseQuantityPayload,
  getIdForCartUpdate,
} from "../../../utils/cartUtils/cartUpdateUtils";
import InternalPageHeader from "../../internalPageHeader/InternalPageHeader";
import { Router, useRouter } from "next/router";
import _ from "lodash";
import { APIKEY, baseUrl } from "../../../constants/urls";
import RootComponnet from "../../../pages";
import RequestQuoteModal from "../../productDetails/leftPane/components/RequestQuoteModal";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import { amountCommaSeperate, getDiscountPercent } from "../../../constants/commonFunction";

const GridView: FC<any> = ({
  product,
  itemCount,
  callBack,
  selectRequestQuote,
  currentAddress,
  latitude,
  longitude,
  type
}) => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
    setCategoryBreadcrumb,
    categoryTreeNested,
  } = useContext(shopConetxt);
  const [cartProduct, setCartProduct] = useState([]);
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [isCartModalVisible, setIsCartModalVisble] = useState(false);
  const router = useRouter();
 const [loginRes, setLoginRes] = 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");
    
   
      
  }, []);

  const addToCart = (prdct: any) => {

    setIsCartLoading(true);
    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=${prdct.id}&pincode=${cityPincode}`
      ).then((res:any) => {
        console.log(res,"res")
        ShipApi.shippingAvailableCheckingAPI(
          loginRes?.token,
          res?.data?.data?.inventory_details?.pincode,
          cityPincode,
          prdct?.weight * prdct?.moq
        ).then((shipRocket) => {
          console.log(shipRocket,"shipRocket")
          // if(shipRocket?.status){
          const params = {
            product_id: prdct.id,
            quantity: get(productQuantity, [product.id], product.moq),
            token: loginRes?.token,
            mp_seller_id: prdct.mp_seller_id,
            gst:prdct?.gst,
            vendor_id: prdct.vendor_id,
            shipping_type: prdct.id==368707 || prdct.id==368706 || prdct.id==368708 || prdct.id==368709 ? 2:0,
            moq: product.moq,
            shipCharge: prdct.id==368707 || prdct.id==368706 || prdct.id==368708 || prdct.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,
            customer_pincode: cityPincode,
            manufacturer_label:prdct?.manufacturer_label,
            seller_pincode: res?.data?.data?.inventory_details?.pincode,
            item_weight: prdct?.weight
          };
          setIsCartModalVisble(!isCartModalVisible);
          AddToCardApi.addToCart(params).then((res) => {
            if (res?.message) {
              setProductQuantity({
                id: product.id,
                quantity: get(
                  productQuantity,
                  [product.id],
                  parseInt(prdct.moq)
                ),
              });
              notification.success({
                message: res?.message,
                duration: 1,
              });
            } else {
              setIsCartLoading(false);
              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);
                <InternalPageHeader item={cartRes.data.items.length} />;
              }
            });
          });
        // }else{
        //     notification.error({message:"Please enter the pin code to check delivery availability"})
        //   }
        });
      
      });
    } else {
      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(prodct.moq)) + 1,
    });
  };

  const decreaseQuantity = (prodct: any) => {
    if (get(productQuantity, [prodct.id], parseInt(prodct.moq)) > 1) {
      setProductQuantity({
        id: product.id,
        quantity: get(productQuantity, [prodct.id], parseInt(prodct.moq)) - 1,
      });
    }
  };
  const getCartQuantity = (productId: any) => {
    return get(productQuantity, [productId.id], productId.moq);
  };

  const buyNow = (item: any) => {
    setIsCartLoading(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,
            mp_seller_id: item.mp_seller_id,
            vendor_id: item.vendor_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) => {
            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);
                if (cartRes.data !== null) {
                  setProductInvoice(cartRes.data);
                  setCartItems(cartRes.data);
                  router.push("/cart");
                  <InternalPageHeader item={cartRes.data.items.length} />;
                }
              });
            } else {
              notification.error({
                message: res?.error,
                duration: 0,
              });
            }
          });
        // }else{
        //   notification.error({message:"Please enter the pin code to check delivery availability"})
        // }
        }); 
     
      });
    } else {
      setIsCartLoading(false);
      notification.error({ message: "Please enter the pin code to check delivery availability" });
    }
  };

  const deleteCart = (productId: any) => {
    setIsCartLoading(true);
    const prod_id = getIdForCartUpdate(
      get(productId, "additional.product_id"),
      cart
    );
    const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
    const params = {
      token: tokenData,
      item_id: prod_id,
    };
    CartApi.removeCartItem(params).then((res_item) => {
      setIsCartLoading(false);
      setCartItems(res_item.data);
    });
  };
  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}`
    );
  };

  const getBaseAmount = (gstPercent: number, price: number) => {
    const base_price: any = price / (1 + gstPercent / 100);
    return parseFloat(base_price).toFixed(2);
  };

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

 
  return (
    <>
      <div className={cx(styles.productGridViewWarapper)}>
        <div
          onClick={() => {
            bredCrumb(product);
          }}
          className={styles.h100}
        >
          
            <Link href={type?`/products/details/${product.url_key}-${product.id}`:`/products/details/${product.url_key}-${product.product_id}`}>
              <a target="_blank"
                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.discountButton}>
                          {`${getDiscountPercent(product)}% OFF`}
                        </div>
                      ) : null
                    ) : null}
                  </div> */}
                  <div className={styles.productImgParent}>
                  {product?.base_image === null ? (
                    <img
                      src={baseUrl + "/" + product?.default_image}
                      className={cx("mb-5", styles.gridImage)}
                      alt="&nbsp; &nbsp; noimage found"
                    />
                  ) : (
                    <img
                      // src={"https://indisparedev.s3.ap-south-1.amazonaws.com/local/product/53223/thumb_1.jpg"}
                      src={product?.s3_base_url + product?.base_image}
                      className={cx("mb-5", styles.gridImage)}
                      alt="  &nbsp; &nbsp; no image found"
                    />
                  )}
                  </div>
                </div>
                {/* </a> */}
                {/* </Link>
        <Link href={`/products/details/${product.product_id}`}> */}
                {/* <a> */}
                <div className={cx(styles.subDescriptionPointer)}>
                  {product.short_description}
                </div>
                {/* </a> */}
                {/* </Link>
        <Link href={`/products/details/${product.product_id}`}> */}
                {/* <a> */}
                <div title={product.name} className={cx(styles.description)}>
                  {product.name}
                </div>
               
              </a>
            </Link>
            <div className={cx(styles.description)}>
                <span style={{color:"#888888"}}>SKU </span><a style={{color:"#000"}} onClick={()=>{navigator.clipboard.writeText(product.sku)}}>{`${product.sku}`}</a>
              </div>

            <Link href={{
            pathname: type?`/products/details/${product.url_key}-${product.id}`:`/products/details/${product.url_key}-${product.product_id}`,
            query: {
              reviews: "reviews",
            }
          }}
          // as={`/products/details/${product.url_key}`}
          >
        <a target="_blank">
            <div
              className={cx("flex cursor-pointer w100")}
              // onClick={() => {
              //   redirectUrl(product);
              // }}
            >
              <Rate
                disabled
                className={styles.rateComponent}
                allowHalf
                value={type?product?.reviews?.average_rating:product?.avg_rating}
              />
              <div className={styles.reviewsLabel}>{`${type?parseInt(product?.reviews?.total_rating):parseInt(
                product?.total_rating
              )} Review (s)`}</div>
            </div>
            </a>
        </Link>
            <div className={cx("flex w100")}>
              <div className={cx(styles.description)}>
                <a>{`By ${product.seller_code || "Vendor not found"}`}</a>
              </div>
              {product.status == 1 ? (
                <>
                  <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>
                </>
              ) : null}
          
          </div>
          {product.special_price == 0 || product.special_price == null ? null : (
            <div className="flex   w100" style={{ flexDirection: "column" }}>
              {/* <div className="flex items-center">
                 {product?.regular_price&&<div className={cx(styles.originalPrice, " mt-1 mr-3")}>
                  ₹ {amountCommaSeperate(parseFloat(product?.regular_price).toFixed(2))}
                </div>} 
               
              </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))}`
                    // `₹${getBaseAmount(
                    //   get(product, "gst", 18),
                    //   parseFloat(get(product, "special_price"))
                    // )}`
                    }
                </div>
                <div className={cx(styles.subDescription, "ml-3 mt-1")}>
                  Exc. of GST
                </div>
              </div> */}
            </div>
          )}
        </div>
        <div className="w100" >
          {/* {product?.special_price == 0 || product?.special_price == null ? ( */}
            <Button
              type="primary"
              block
              className="my-2"
              onClick={() => selectRequestQuote(product)}
            >
              Request for Quote
            </Button>
          {/* ) : (
            <div className="w100">
              <div className="flex items-center justify-around ">
                

                <Button
                  onClick={() => {
                    addToCart(product);
                  }}
                  className={"secondaryButton"}
                  type="primary"
                  block
                >
                  ADD TO CART
                </Button>
                <Button
                className="my-1 ml-2"
                style={{ padding: "0.25rem 0.75rem !important", height: "38px" }}
                type="primary"
                block
                onClick={() => {
                  buyNow(product);
                }}
              >
                BUY NOW
              </Button>
              </div>
              
            </div>
          )} */}
        </div>
        {isCartModalVisible ? (
          <CartModal
            cartLength={cart}
            handleCartClose={() => setIsCartModalVisble(false)}
            products={cart}
            productInvoice={productInvoice}
            deleteCart={deleteCart}
            isCartModalVisible={isCartModalVisible}
            callBack={cart}
          />
        ) : null}
      </div>
    </>
  );
};

export default GridView;