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

import styles from "./productCard.module.scss";
import RelatedProdcuts from "../../productDetails/leftPane/components/RelatedProdcuts";
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 shopConetxt from "../../../context/shopConetxt";
import { useRouter } from "next/router";
import CartModal from "../../modal/cartModal/CartModal";
import {
  getIncreaseQuantityPayload,
  getDecreaseQuantityPayload,
  getIdForCartUpdate,
} from "../../../utils/cartUtils/cartUpdateUtils";
import InternalPageHeader from "../../internalPageHeader/InternalPageHeader";
import _ from "lodash";
import { APIKEY, baseUrl } from "../../../constants/urls";
import { amountCommaSeperate, getDiscountPercent } from "../../../constants/commonFunction";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import Geocode from "react-geocode";
const ListView: FC<any> = ({ product, itemCount, selectRequestQuote, currentAddress,
  latitude,
  longitude }) => {
  const router = useRouter();
  const {
    setCartItems,
    cart,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
    setCategoryBreadcrumb,
    categoryTreeNested,
  } = useContext(shopConetxt);
  const [isCartModalVisible, setIsCartModalVisble] = useState(false);
  const [productInvoice, setProductInvoice] = useState<any>({});
  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");
    // 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 addToCartSubmit = (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) => {
        ShipApi.shippingAvailableCheckingAPI(
          loginRes?.token,
          res?.data?.data?.inventory_details?.pincode,
          cityPincode,
          prdct?.weight * prdct?.moq
        ).then((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,
            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,
            gst:prdct?.gst,
            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 deleteCartItem = (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 increaseQuantity = (prodct: any) => {
    setProductQuantity({
      id: prodct.id,
      quantity: get(productQuantity, [prodct.id], parseInt(prodct.moq)) + 1,
    });
  };

  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 decreaseQuantity = (prodct: any) => {
    if (get(productQuantity, [prodct.id], prodct.moq) > 1) {
      setProductQuantity({
        id: product.id,
        quantity: get(productQuantity, [prodct.id]) - 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,
            gst:item?.gst,
            customer_lang: long,
            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 getBaseAmount = (gstPercent: number, price: number) => {
    const base_price: any = price / (1 + gstPercent / 100);

    return parseFloat(base_price).toFixed(2);
  };

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

  return (
    <>
      <div
        className={cx(styles.listCardWrapper, "w-full flex justify-between")}
      >
        <div key={product.id} className="flex">
          <div
            onClick={() => {
              bredCrumb(product);
            }}
          >
            <Link href={`/products/details/${product.url_key}-${product.product_id}`}>
              <a
                onClick={() => {
                  bredCrumb(product);
                }}
              >
                {product?.base_image === null ? (
                  <img
                    src={baseUrl + "/" + product?.default_image}
                    className={cx(styles.productImageList, "m-2")}
                    alt="no image found"
                  />
                ) : (
                  <img
                    className={cx(styles.productImageList, "m-2")}
                    src={product?.s3_base_url + product?.base_image}
                    alt="no image found"
                  />
                )}
              </a>
            </Link>
          </div>
          <div
            onClick={() => {
              bredCrumb(product);
            }}
          >
            
                <div
                  className={cx(
                    styles.nameAndDescriptionPointer,
                    "mt-4 mb-4 ml-2"
                  )}
                ><Link href={`/products/details/${product.url_key}-${product.product_id}`}>
                <a
                  onClick={() => {
                    bredCrumb(product);
                  }}
                >
                  <div className={cx(styles.subDescription, "truncate")}>
                    {product.short_description}
                  </div>
                  <div
                    className={cx(styles.descriptionList, "truncate")}
                    title={product.name}
                  >
                    {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>
                </div>
            
          </div>
          <div className={cx("mt-2 ml-2")} style={{width:"200px"}}>
            <div className={cx(styles.vendorName, "ml-0.5 truncate")}>{`By ${product.seller_code || "vendor not found"
              }`}</div>
            <div
              className="flex cursor-pointer"
              onClick={() => {
                redirectUrl(product);
              }}
            >
              <Rate
                disabled
                className={styles.rateComponent}
                allowHalf
                defaultValue={product.avg_rating}
              />
              <div className={styles.reviewsLabel}>{`${parseInt(
                product.total_rating
              )} Review (s)`}</div>
            </div>
          </div>
          {/* <div className={cx(styles.nameAndDescription, "mt-4 mb-4 ml-2")}>
            <div className={cx("truncate text-10px", styles.font10px)}>
              {product.moq}
            </div>
            <div className={cx("truncate", styles.font10px)}>(MOQ)</div>
          </div>
          <div
            className={cx(
              styles.nameAndDescription,
              "mt-4 mb-4 ml-2 flex items-center"
            )}
          >
            <CheckCircleFilled className={cx(styles.darkGreen, "mr-1")} />
            <div className={cx("text-green-900", styles.font10px)}>
              Verified
            </div>
          </div> */}
          {product.special_price === 0 ? null : (
            <div className={cx(styles.nameAndDescriptionList, "mt-1 ml-2")}>
              <div className="flex items-center">
                {/* <div className={styles.originalPrice}>{`₹${amountCommaSeperate(parseFloat(
                  product.regular_price
                ).toFixed(2))}`}</div> */}
                {/* <div
                  className={cx(styles.subDescription, "mt-1 mr-1")}
                  style={{ marginLeft: "2px" }}
                >
                  (Incl. of GST)
                </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))}`
                    
                    }
                </div>
                <div className={cx(styles.subDescription, "ml-1")}>
                  Exc. of GST
                </div>
              </div> */}
            </div>
          )}
          {/* <div className={styles.discountMain} style={{ alignItems: "center" }}>
            {parseInt(product.special_price) > 0 && getDiscountPercent(product)>0? (
              product?.special_price ? (
                <div
                  className={styles.discountButtonList}
                  style={{ height: "1.5rem", alignItems: "center" }}
                >
                  {`${getDiscountPercent(product)}% OFF`}
                </div>
              ) : null
            ) : null}
          </div> */}
        </div>

        {/* {product.special_price == 0 ? ( */}
          <Button
            type="primary"
            block
            className="m-2 "
            onClick={() => selectRequestQuote(product)}
          >
            Request for Quote
          </Button>
        {/* ) : (
          <div className="flex items-center">
            
            <Button
              onClick={() => {
                addToCartSubmit(product);
              }}
              className={cx(
                "mr-2 secondaryButton",
                styles.buttonPadding,
                styles.listButtonSpace
              )}
              type="primary"
            >
              Add to Cart
            </Button>
            <Button
              onClick={() => {
                buyNow(product);
              }}
              className={cx(
                "mr-2",
                styles.buttonPadding,
                styles.listButtonSpace
              )}
              type="primary"
              style={{ height: "38px" }}
            >
              Buy Now
            </Button>
          </div>
        )} */}
        {isCartModalVisible ? (
          <CartModal
            handleCartClose={() => setIsCartModalVisble(false)}
            products={cart}
            productInvoice={productInvoice}
            deleteCart={deleteCartItem}
            isCartModalVisible={isCartModalVisible}
          />
        ) : null}
      </div>
    </>
  );
};

export default ListView;