import { Button, Image, Modal, Popconfirm, Skeleton, notification } from "antd";
import cx from "classnames";
import { FC, useCallback, useEffect, useContext, useState } from "react";
import styles from "./cartModal.module.scss";
import * as CartApi from "../../../pages/api/cart";
import { DeleteOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import shopConetxt from "../../../context/shopConetxt";
import { getIdForCartUpdate } from "../../../utils/cartUtils/cartUpdateUtils";
import _, { get } from "lodash";
import { s3BucketUrl } from "../../../constants/urls";

import * as AddToWishListApi from "../../../pages/api/wishList";

const CartModal: FC<any> = ({ isCartModalVisible, handleCartClose, deleteCart, products, productInvoice, cartLength }) => {

	const { cart, totalPrice, isCartLoading, addProductToWishlist } = useContext(shopConetxt);
	const [loginRes, setLoginRes] = useState<any>({});
	const router = useRouter();
	const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);

	const goToCart = () => {
		handleCartClose()
		router.push("/cart")
	}

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

	const moveWishList = (productDetails: any) => {


		if (_.isEmpty(loginRes)) {
			setIsOTPModalVisible(!isOTPModalVisible);
		} else {

			const params = {
				product_id: productDetails?.product?.id,
				token: loginRes?.token,
			};
			AddToWishListApi.addToWishList(params).then((res: any) => {
				if (res.data) { addProductToWishlist(res.data); deleteCart(productDetails) }
				notification.success({ message: res.message })

			});
		}
	}


	return (
		<>
			<Modal
				width={400}
				style={{ width: "400px", position: "absolute", right: 0, top: "62px" }}
				visible={isCartModalVisible}
				onOk={handleCartClose}
				onCancel={handleCartClose}
				footer={null}
				destroyOnClose={true}
			>
				<div>
					<h2 className={styles.headerTitle}>Shopping Cart</h2>
					{isCartLoading ? (<Skeleton active />) : (
						<>
							{cart.map((cartItem: any, idx: number) => {
								return (
									<div key={idx} className={cx("ant-row", styles.listBorder)}>
										<div className={cx("ant-col ant-col-xl-4")}>
											<Image preview={false} width={30} height={30} src={s3BucketUrl + cartItem?.product?.base_image?.path} alt="icon" />
										</div>
										<div className={cx("ant-col ant-col-xl-18")}>
											<span className={styles.productTitle}>{cartItem?.product?.name}</span>
											{/* <span className={styles.productTitle}>   &nbsp; {cartItem?.product.description}</span> */}
											<div>
												<span className={styles.quantityTitle}>Qty</span><span className={styles.quantityValue}>&nbsp;{cartItem?.quantity}</span>
												<span className={styles.quantityTitle}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Amount</span><span className={styles.quantityValue}>&nbsp;&nbsp; {`₹${parseFloat(cartItem?.price).toFixed(2)}`}</span>
												<span className={styles.quantityTitle}>&nbsp;&nbsp;&nbsp;Inc. of GST</span>
											</div>
										</div>
										<div className={cx("ant-col ant-col-xl-2")}>
											<Popconfirm

												title={"Are you sure you want to remove this item from the cart?"}
												onConfirm={() => { deleteCart(cartItem); }}
												onCancel={() => { moveWishList(cartItem) }}
												okText="Delete"
												cancelText="Move to Wishlist"
											>
												<DeleteOutlined style={{ color: "#F00" }} />
											</Popconfirm>

										</div>
									</div>
								);
							})}
							< div className="my-4"><span className={styles.quantityTitle}>Total</span> <span className={styles.quantityValue}>{totalPrice} Exc. of GST</span></div>
							<Button type="primary" block style={{ height: "50px" }} onClick={goToCart}>View Cart & Checkout</Button>
						</>

					)}

				</div>
			</Modal>
		</>
	);
};

export default CartModal;