import React, { FC, useCallback, useState, useContext, useEffect } from "react";
import cx from "classnames";
import { Rate, Button } 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 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 } from "../../../constants/urls";

const GridView: FC<any> = ({ product, itemCount, callBack }) => {
	const { cart,
		setCartItems,
		setIsCartLoading,
		productQuantity,
		setProductQuantity
	} = 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 = (product: any) => {
	
		setIsCartLoading(true);
		setProductQuantity({ id: product.id, quantity: get(productQuantity, [product.id], 1) })
		const params = {
			product_id: product.id,
			quantity: get(productQuantity, [product.id], 1),
			vendor_id:product.vendor_id,
			token: loginRes?.token
		};
		// setIsCartModalVisble(!isCartModalVisible);
		AddToCardApi.addToCart(params).then((res) => {
			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: product.id, quantity: get(productQuantity, [prodct.id], 1) + 1 })
	}

	const decreaseQuantity = (prodct: any) => {
		if (get(productQuantity, [prodct.id], 1) > 1) {
			setProductQuantity({ id: product.id, quantity: get(productQuantity, [prodct.id]) - 1 })
		}
	}
	const getCartQuantity = (productId: any) => {
		return get(productQuantity, [productId], 1);
	}
	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,
			vendor_id:item.vendor_id,
		};
		AddToCardApi.addToCart(params).then((res) => {
			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} />
				}
			});
		});
	};

	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)
		});
	};


	return (
		<>
			<div className={cx(styles.productGridViewWarapper)}>
				<Link href={`/products/details/${product.id}`}>
					<img
						src={`${baseUrl}/storage/${product?.base_image}`}
						className={cx("mb-5", styles.gridImage)}
						alt="no image found"
					/>
				</Link>
				<Link href={`/products/details/${product.id}`}>
					<div className={cx(styles.subDescriptionPointer, "truncate")}>
						{product.short_description}
					</div>
					</Link>
					<Link href={`/products/details/${product.id}`}>
				<div className={cx(styles.description, "truncate")}>
					{product.name}
				</div>
				</Link>
			
				<div className={cx("flex")}>
					<Rate
						disabled
						className={styles.rateComponent}
						allowHalf
						defaultValue={product?.avg_rating}
					/>
					<div
						className={styles.reviewsLabel}
					>{`${product?.total_rating} Review (s)`}</div>
				</div>
				<div className={cx("flex")}>
					<div className={cx(styles.description, "truncate")}>{`By ${product.brand_label || "brand not found"
						}`}</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>
				<div className="flex items-center">
					<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
								? null
								: `₹${parseFloat(product.special_price).toFixed(2)}`}
						</div>
						<div className={cx(styles.subDescription, "ml-2 mt-1")}>
							Inc. of GST
						</div>
					</div>
				</div>

				<div className="flex items-center justify-between">
					<div
						className={cx("flex items-center mr-2", styles.itemCountWrapper)}
					>
						<Button
							size="middle"
							className={styles.plusMinusIcon}
							type="text"
							onClick={() => {
								decreaseQuantity(product);
							}}
							icon={<MinusOutlined />}
						/>
						<div>{getCartQuantity(product.id)}</div>
						<Button
							size="middle"
							className={styles.plusMinusIcon}
							type="text"
							onClick={() => {
								increaseQuantity(product);
							}}
							icon={<PlusOutlined />}
						/>
					</div>

					<Button
						onClick={() => {
							addToCart(product);
						}}
						size="middle"
						type="primary"
					>
						Add to Cart
					</Button>
				</div>
				<div>
					<Button size="middle" className={"mr-2 w-full mt-1"} type="primary" 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 GridView;