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 "./featuredGridView.module.scss";
import * as AddToCardApi from "../../../pages/api/addTocart";
import * as CartApi from "../../../pages/api/cart";
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 { baseUrl, s3BucketUrl } from "../../../constants/urls";
import RootComponnet from "../../../pages";
import RequestQuoteModal from "../../productDetails/leftPane/components/RequestQuoteModal";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";

const FeaturedGridView: FC<any> = ({ product, itemCount, callBack,selectRequestQuote }) => {
  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>({});
  
  

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
  }, []);

  const addToCart = (prdct: any) => {
    setIsCartLoading(true);
    
    const params = {
      product_id: prdct.id,
      quantity: get(productQuantity, [product.id], 1),
      token: loginRes?.token,
      mp_seller_id: prdct.mp_seller_id,
      vendor_id: prdct.vendor_id,
      shipping_type: 0,
    };
    setIsCartModalVisble(!isCartModalVisible);
    AddToCardApi.addToCart(params).then((res) => {
      if(res?.message){
        setProductQuantity({
          id: product.id,
          quantity: get(productQuantity, [product.id], parseInt(prdct.moq)),
        });
        notification.open({
          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} />;
        }
      });
    });
  };

  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 params = {
      product_id: item.id,
      quantity: get(productQuantity, [item.id], 1),
      token: details?.token,
      mp_seller_id: item.mp_seller_id,
      vendor_id: item.vendor_id,
      shipping_type: 0,
    };
    AddToCardApi.addToCart(params).then((res) => {
      if(res?.message){
        notification.open({
          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,
        });
      }
      
    });
  };

  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.product_id}`,

      query:{
        reviews:"reviews"
       },
    },`/products/details/${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)=>{
    const flattenCategory = getFlattenCategory(categoryTreeNested);
    const breadCrumbData = createBreadcrumb(prod.last_category, flattenCategory);
    setCategoryBreadcrumb(breadCrumbData);
  }

  return (
    <>
      <div className={cx(styles.productGridViewWarapper)}>
        <Link href={`/products/details/${product.url_key}`} onClick={()=>{bredCrumb(product)}}>
          <a>
            {product?.base_image === null ? (
              <img
                src={baseUrl + "/" + product?.default_image}
                className={cx("mb-5", styles.gridImage)}
                alt="no image found"
              />
            ) : (
              <img
              // src={"https://indisparedev.s3.ap-south-1.amazonaws.com/local/product/53223/thumb_1.jpg"}
                src={s3BucketUrl + product?.base_image}
                className={cx("mb-5", styles.gridImage)}
                alt="no image found"
              />
            )}
          {/* </a> */}
        {/* </Link>
        <Link href={`/products/details/${product.product_id}`}> */}
          {/* <a> */}
            {/* <div className={cx(styles.subDescriptionPointer, "truncate")}>
              {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>
        {/* <Link href={`/products/details/${product.product_id}#reviews`}>
        <a> */}
        <div className={cx("flex cursor-pointer w100")} onClick={()=>{redirectUrl(product)}}>
          <Rate
            disabled
            className={styles.rateComponent}
            allowHalf
            value={product?.avg_rating}
          />
          <div className={styles.reviewsLabel}>{`${parseInt(
            product?.reviews?.total_rating
          )} Review (s)`}</div>
        </div>
        {/* </a>
        </Link> */}
        <div className={cx("flex w100")}>
          <div className={cx(styles.description, "truncate ")}>
            <a>{`By ${product.seller_code}`}</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?null:<div className="flex items-center w100">
          <div className={cx(styles.originalPrice, "mr-1 mt-1")}>
            {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
                ? `₹${parseFloat(product.price).toFixed(2)}`
                :`₹${getBaseAmount(
                  get(product, "gst", 18),
                  parseFloat(get(product, "special_price"))
                )}`}
            </div>
            <div className={cx(styles.subDescription, "ml-2 mt-1")}>
              Exc. of GST
            </div>
          </div>
        </div>}
        {product.special_price==0?<Button type="primary" block className="my-2 thirdButtonPink" onClick={()=>selectRequestQuote(product)}>Request for Quote</Button>:<div className="w100">
        <div className="flex items-center justify-around ">
          <div
            className={cx(
              "flex items-center mr-1 my-2",
              styles.itemCountWrapper
            )}
          >
            <Button
              size="middle"
              className={cx(styles.plusMinusIcon, "mx-1")}
              type="text"
              block
              disabled={getCartQuantity(product)===1?true:false}
              onClick={() => {
                decreaseQuantity(product);
              }}
              icon={<MinusOutlined  />}
            />
            <div>{getCartQuantity(product)}</div>
            <Button
              block
              size="middle"
              className={cx(styles.plusMinusIcon, "mx-1")}
              type="text"
              onClick={() => {
                increaseQuantity(product);
              }}
              icon={<PlusOutlined />}
            />
          </div>

          <Button
          
            onClick={() => {
              addToCart(product);
            }}
            className={"secondaryButton"}
            type="primary"
            block
          >
            Add to Cart
          </Button>
        </div>
        <Button
          className="my-2 "
          style={{padding:"0 0.75rem !important"}}
          type="primary"
          block
          onClick={() => {
            buyNow(product);
          }}
        >
          Buy Now
        </Button>
          </div>}
        {isCartModalVisible ? (
          <CartModal
            cartLength={cart}
            handleCartClose={() => setIsCartModalVisble(false)}
            products={cart}
            productInvoice={productInvoice}
            deleteCart={deleteCart}
            isCartModalVisible={isCartModalVisible}
            callBack={cart}
          />
        ) : null}
        
      </div>
      
    </>
  );
};

export default FeaturedGridView;