import React, { useState } from "react";
import style from "./productButtons.module.css";
import { Favorite, FavoriteBorder } from "@mui/icons-material";
import ProductQnty from "@/components/product/productQnty";
import { useSelector } from "react-redux";
import { isWishListed } from "@/store/wishlist";
import { useDispatch } from "react-redux";
import { wishlistStoreActions } from "@/store/wishlist";
import { cartStoreActions } from "@/store/cart";

const ProductButtons = ({ productData }) => {
  const [selectedQty, setSelectedQty] = useState(1);
  const account = useSelector((state) => state.accountStore);
  const isWishlisted = useSelector(isWishListed(productData._id));
  const dispatch = useDispatch();
  
  const removeWishList = () => {
    dispatch(
      wishlistStoreActions.removeWishList({
        id: productData._id,
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };
  const addWishList = () => {
    dispatch(
      wishlistStoreActions.addWishList({
        product: {
          name: productData.name,
          id: productData._id,
          image:
            productData.image &&
            process.env.NEXT_PUBLIC_UPLOADS +
              "/products/" +
              productData.image[0],
          price_type: productData.price_type,
          price: productData.price,
          qty: selectedQty,
          exactQty: productData.stock,
          offer: productData.offer,
          partNo: productData.partNo,
          tax: productData.tax_rate,
          payment_accepted: productData.payment_accepted,
          brand: productData.category[productData.category.length - 1].name,
        },
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };
  const addCart = () => {
    dispatch(
      cartStoreActions.addCart({
        product: {
          name: productData.name,
          id: productData._id,
          image:
            productData.image &&
            process.env.NEXT_PUBLIC_UPLOADS +
              "/products/" +
              productData.image[0],
          price: productData.price,
          price_type: productData.price_type,
          qty: selectedQty,
          exactQty: productData.stock,
          offer: productData.offer,
          tax: productData.tax_rate,
          partNo:
            productData.category[productData.category.length - 1].name || null,
          brand: productData.details.map((item) => {
            if (item.title.toLowerCase() === "part no") return item.value;
          }),
          payment_accepted: productData.payment_accepted,
        },
        loggedIn: account.loggedIn,
        userid: account.userid,
      })
    );
  };
  return (
    <React.Fragment>
      {(productData.stock > 0 || productData.stock === -1) && (
        <ProductQnty
          qnty={selectedQty}
          onUpdate={(value) => setSelectedQty(value)}
          stock={productData.stock}
        />
      )}
      <div className={style.product_buttons}>
        {(productData.stock > 0 || productData.stock === -1) && (
          <>
            <div
              className={`secondary-btn ${style.customSecondaryBtn}`}
              onClick={() => addCart()}
            >
              Add To Cart
            </div>
          </>
        )}
        <div className={style.normal_btn}>
          {isWishlisted ? (
            <div onClick={() => removeWishList()}>
              <Favorite className={style.selectedFavorite} />{" "}
              <span>Remove From Wish List</span>
            </div>
          ) : (
            <div onClick={() => addWishList()}>
              <FavoriteBorder /> <span>Add To Wish List</span>
            </div>
          )}
        </div>
      </div>
    </React.Fragment>
  );
};

export default ProductButtons;
