import React, { useEffect, useState } from "react";
import style from "./product_card.module.css";
import Image from "next/image";
import NextImage from "@/other/NextImage";
import Link from "next/link";
import {
  Favorite,
  FavoriteBorder,
  FavoriteBorderRounded,
} from "@mui/icons-material";
import { useSelector } from "react-redux";
import { getWishList, isWishListed } from "@/store/wishlist";
import { useDispatch } from "react-redux";
import { wishlistStoreActions } from "@/store/wishlist";
import { cartStoreActions } from "@/store/cart";
import { useRouter } from "next/router";
import { accountStoreActions } from "@/store/account";

const ProductCard = (props) => {
  const router = useRouter();
  const isWishlisted = useSelector(isWishListed(props.id));
  const account = useSelector((state) => state.accountStore);
  const currencyType = useSelector((state) => state.generalStore.currency_type);
  const dispatch = useDispatch();
  const removeWishList = (e, id) => {
    e.stopPropagation();
    dispatch(
      wishlistStoreActions.removeWishList({
        id: id,
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };
  const addWishList = (e) => {
    e.stopPropagation();
    if (account.loggedIn) {
      dispatch(
        wishlistStoreActions.addWishList({
          product: {
            name: props.name,
            id: props.id,
            image: props.image,
            price_type: props.price_type,
            price: props.price,
            qty: 1,
            exactQty: props.qty,
            offer: props.offer,
            tax: props.tax,
          },
          loggedIn: account.loggedIn,
          userid: account.userid,
        })
      );
    } else dispatch(accountStoreActions.openSignInUI({ signInUI: true }));
  };

  const addCart = (e) => {
    e.stopPropagation();
    dispatch(
      cartStoreActions.addCart({
        product: {
          name: props.name,
          id: props.id,
          image: props.image,
          price: props.price,
          price_type: props.price_type,
          qty: 1,
          exactQty: props.qty,
          offer: props.offer,
          tax: props.tax,
        },
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };

  const goto = (e) => {
    router.push("/product/" + props.slug);
  };

  const getPrice = () => {
    let price = 0;
    if (props.price_type === "quantity_wise") {
      price = Number(props.price[0].price);
    } else {
      price = Number(props.price);
    }
    return price.toFixed(2);
  };

  const getOffer = () => {
    let offer = getPrice() - (props.offer / 100) * getPrice();
    return offer.toFixed(2);
  };

  useEffect(() => {}, []);

  return (
    <div className={style.product_card} onClick={() => goto()}>
      <div className={style.product_image}>
        <NextImage src={props.image} alt="" fill />
      </div>
      <div className={style.product_detail}>
        <div className={`${style.product_name} capitalize`}>{props.name}</div>
        {props.offer > 0 && (
          <div className={`${style.product_offer}`}>
            {Math.floor(props.offer)}% Off
          </div>
        )}
        <div
          className={`${style.product_wishlist} ${
            isWishlisted && style.active
          }`}
        >
          {isWishlisted ? (
            <Favorite
              className={style.selected_favorite}
              onClick={(event) => removeWishList(event, props.id)}
            />
          ) : (
            <FavoriteBorder onClick={addWishList} />
          )}
        </div>
        <div
          className={`${style.flex_item} ${
            !props.offer && style.product_alone
          } ${getPrice() <= 0 && style.no_price}`}
        >
          {getPrice() > 0 &&
            (props.offer > 0 ? (
              <div className={style.product_price}>
                <div className={`${style.price} `}>
                  {getOffer()}
                  &nbsp;{currencyType}
                </div>
                <div className={style.prev_price}>
                  {getPrice()}&nbsp;{currencyType}
                </div>
              </div>
            ) : (
              <div className={style.product_price}>
                <div className={`${style.price}  `}>
                  {getPrice()}&nbsp;{currencyType}
                </div>
              </div>
            ))}
        </div>
        <div className={style.product_button}>
          <div className={style.cart_button}>
            {props.qty > 0 || props.qty === -1 ? (
              <button
                button="button"
                className={`primary_btn ${style.customBtn}`}
                onClick={(event) => addCart(event)}
              >
                Add To Cart
              </button>
            ) : (
              <div className={style.out_of_stock}>Out Of Stock</div>
            )}
          </div>
        </div>
        {/* <div className={style.view_button}>
          <button
            button="button"
            className={`${style.customViewBtn}`}
            onClick={() =>
              router.push("/product/" + props.id + "_" + props.name)
            }
          >
            View Details
          </button>
        </div> */}
      </div>
    </div>
  );
};

export default ProductCard;
