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 } 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 shopConetxt from "../../../context/shopConetxt";
import { useRouter } from "next/router";
import CartModal from "../../modal/cartModal/CartModal";
import { getIncreaseQuantityPayload, getDecreaseQuantityPayload } from '../../../utils/cartUtils/cartUpdateUtils';
import InternalPageHeader from "../../internalPageHeader/InternalPageHeader";
import _ from "lodash";

const ListView: FC<any> = ({ product, itemCount }) => {
	const router = useRouter();
	const {
		setCartItems,
		cart,
		setIsCartLoading,
		productQuantity,
		setProductQuantity
	} = useContext(shopConetxt);
	const [isCartModalVisible, setIsCartModalVisble] = useState(false);
	const [productInvoice, setProductInvoice] = useState<any>({});
	const [loginRes, setLoginRes] = useState<any>({});

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

	const addToCartSubmit = (prdct: any) => {
		setIsCartLoading(true);
		setProductQuantity({ id: product.id, quantity: get(productQuantity, [product.id], 1) })
		const params = {
			product_id: prdct.id,
			quantity: get(productQuantity, [product.id], 1),
			token: loginRes?.token,
			vendor_id:prdct.vendor_id,
		};
		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 deleteCartItem = (productId: any) => {
		setIsCartLoading(true);
		const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
		const params = {
			token: tokenData,
			item_id: productId
		}
		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], 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} />
				}
			});
		});
	};

	return (
		<>

			<div className={cx(styles.listCardWrapper, "w-full flex justify-between")}>
				<div key={product.id} className="flex">
					<Link href={`/products/details/${product.id}`}>
						<img
							className={cx(styles.productImageList, "m-2")}
							src={product?.base_image?.small_image_url}
						/>
					</Link>
					<Link href={`/products/details/${product.id}`}>
						<div
							className={cx(styles.nameAndDescriptionPointer, "mt-4 mb-4 ml-5")}
						>
							<div className={cx(styles.subDescription, "truncate")}>
								{product.short_description}
							</div>
							<div className={cx(styles.description, "truncate")}>
								{product.name}
							</div>
						</div>
					</Link>
					<div className={cx("mt-4 mb-4 ml-5")}>
						<div className={cx(styles.description, "ml-0.5 truncate")}>{`By ${product.brand_label || "brand not found"
							}`}</div>
						<div className="flex">
							<Rate
								disabled
								className={styles.rateComponent}
								allowHalf
								defaultValue={product.reviews.average_rating}
							/>
							<div
								className={styles.reviewsLabel}
							>{`${product.reviews.total} Review (s)`}</div>
						</div>
					</div>
					<div className={cx(styles.nameAndDescription, "mt-4 mb-4 ml-5")}>
						<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-5 flex items-center"
						)}
					>
						<CheckCircleFilled className={cx(styles.darkGreen, "mr-1")} />
						<div className={cx("text-green-900", styles.font10px)}>Verified</div>
					</div>
					<div className={cx(styles.nameAndDescription, "mt-4 mb-4 ml-5")}>
						<div className={styles.originalPrice}>{`₹${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-1")}>Inc. of GST</div>
						</div>
					</div>
				</div>

				<div className="flex items-center">
					<div className={cx("flex items-center mr-2", styles.itemCountWrapper)}>
						<Button
							className={styles.plusMinusIcon}
							type="text"
							icon={<MinusOutlined />}
							onClick={() => {
								decreaseQuantity(product);
							}}
						/>
						<div>{getCartQuantity(product.id)}</div>
						<Button
							className={styles.plusMinusIcon}
							type="text"
							icon={<PlusOutlined />}
							onClick={() => {
								increaseQuantity(product);
							}}
						/>
					</div>
					<Button
						onClick={() => {
							addToCartSubmit(product);
						}}
						className={"mr-2"}
						type="primary"
						icon={<PlusOutlined />}
					/>
					<Button
						onClick={() => {
							buyNow(product);
						}}
						className={"mr-2"}
						type="primary"
					>
						Buy Now
					</Button>
				</div>
				{isCartModalVisible ? (<CartModal
					handleCartClose={() => setIsCartModalVisble(false)}
					products={cart}
					productInvoice={productInvoice}
					deleteCart={deleteCartItem}
					isCartModalVisible={isCartModalVisible}
				/>) : null}
			</div>
		</>
	);
};

export default ListView;