import React from "react";
import { PiHeartLight } from "react-icons/pi";
import style from "./wishlist.module.css";
import RightDrawer from "@/components/utils/rightDrawer";
import { useEffect } from "react";
import Image from "next/image";
import { useSelector, useDispatch } from "react-redux";
import { cartStoreActions } from "@/store/cart";
import { wishlistStoreActions } from "@/store/wishlist";
import NextImage from "@/other/NextImage";
import { useRouter } from "next/router";

const WishList = (props) => {
  const storeData = useSelector((state) => state.wishlistStore.products);
  const dispatch = useDispatch();
  const router = useRouter();
  const account = useSelector((state) => state.accountStore);
  const currencyType = useSelector((state) => state.generalStore.currency_type);
  console.log("storeData", storeData);

  const deleteWishList = (index) => {
    dispatch(
      wishlistStoreActions.deleteWishList({
        index: index,
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };

  const addToCart = (index) => {
    dispatch(cartStoreActions.addCart({ product: storeData[index] }));
  };

  useEffect(() => {
    console.log(props.open);
  }, [props.open]);

  const onClose = () => {
    if (props.onClose) props.onClose();
  };

  const getPrice = (prices, price_type, quantity) => {
    let price = 0;
    if (price_type === "quantity_wise") {
      for (const item of prices) {
        if (quantity <= item.quantity) {
          price = Number(item.price);
          break;
        }
      }
    } else {
      price = Number(prices);
    }
    return price.toFixed(2);
  };

  return (
    <>
      <RightDrawer
        title="Wish List"
        icon={<PiHeartLight />}
        open={props.open}
        onClose={onClose}
      >
        <div className={style.product}>
          {storeData.map((item, index) => (
            <div
              className={style.product_section}
              key={item.name + "_" + index}
            >
              <div
                onClick={() => {
                  router.push(`/product/${item.id}_${item.name}`);
                  onClose();
                }}
                className={`center_grid cursor_pointer`}
              >
                <div className={style.product_image}>
                  <NextImage src={item.image} alt="Product" fill />
                </div>
                <div className={style.product_title}>
                  {item.name
                    .replaceAll("<b>", "")
                    .replaceAll("</b>", "")
                    .replaceAll("<i>", "")
                    .replaceAll("</i>", "")
                    .replaceAll("</br>", "")}
                </div>
              </div>
              {getPrice(item.price, item.price_type, item.qty) > 0 &&
                (item.offer ? (
                  <div className={style.product_price}>
                    {currencyType}&nbsp;
                    {(
                      getPrice(item.price, item.price_type, item.qty) -
                      (item.offer / 100) *
                        getPrice(item.price, item.price_type, item.qty)
                    ).toFixed(2)}
                  </div>
                ) : (
                  <div className={style.product_price}>
                    {currencyType}&nbsp;
                    {(
                      getPrice(item.price, item.price_type, item.qty) *
                      Number(item.qty)
                    ).toFixed(2)}
                  </div>
                ))}
              <div className={style.options}>
                <div className={style.product_add}>
                  {item.exactQty && item.exactQty > 0 ? (
                    <div
                      className={`primary_btn ${style.customBtn}`}
                      onClick={() => addToCart(index)}
                    >
                      Add To Cart
                    </div>
                  ) : (
                    <div className={style.out_of_stock}>Out Of Stock</div>
                  )}
                </div>
                <div className={style.product_remove}>
                  <div
                    className={`secondary-btn ${style.customBtn}`}
                    onClick={() => deleteWishList(index)}
                  >
                    Remove
                  </div>
                </div>
              </div>
              <hr />
            </div>
          ))}
        </div>
      </RightDrawer>
    </>
  );
};

export default WishList;
