import React, { useState } from "react";
import "./Increment_decrement_btn_holder.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
import {
  getAllCart,
  postCartQuantity,
} from "../../../../features/cart/cartSlice";
import { useDispatch, useSelector } from "react-redux";

function Increment_decrement_btn_holder_add({
  quantity,
  setQuantity,
  val,
  setInstock,
  setError,
}) {
  const increment = () => {
    setQuantity((prev) => prev + 1);
  };

  const decrement = () => {
    setQuantity((prev) => (prev > 1 ? prev - 1 : 1));
  };

  const dispatch = useDispatch();
  const isSignIn = useSelector((state) => state.auth.is_signin);
  const allcartData = useSelector((state) => state.cart.allCarts);
  const cartQuantity = async (type) => {
    try {
      const stock =
        val?.Triple_Variant?.stock ??
        val?.Double_Variant?.stock ??
        val?.Product_Variant?.general_stock ??
        0;
      setError("");
      setInstock(false);
      if (type === "add" && Number(quantity) >= Number(stock)) {
        setError(`Only ${stock} quantity in stock`);

        return;
      }

      const data = {
        cart_id: val?.id,
        type: type,
        isSignIn,
        product_id: val.product_id,
        variant_id: val.variant_id,
        d_variant_id: val.d_variant_id,
        t_variant_id: val.t_variant_id,
        variant_type_id: val.Product.variant_type_id,
      };
      const res = await dispatch(postCartQuantity(data));
      if (res.meta?.requestStatus === "fulfilled") {
        dispatch(getAllCart(isSignIn));
      } else if (res.meta?.requestStatus === "rejected") {
        console.log("Error:", res.payload || "Not In Cart");
      }
    } catch (error) {
      console.log("Error:", error);
    }
  };

  return (
    <>
      <section className="Increment_decrement_btn_holder">
        <div
          className="sign_holder"
          onClick={() => {
            cartQuantity("minus");
          }}
        >
          <FontAwesomeIcon className="sign_icon" icon={faMinus} />
        </div>
        <div className="number_holder">
          <span>{String(val?.quantity).padStart(2, "0")}</span>
        </div>
        {/* {Number(val?.Product_Variant?.general_stock) >= Number(quantity) ? ( */}
        <div
          className="sign_holder"
          onClick={() => {
            cartQuantity("add");
          }}
          // onClick={() => {
          //   if (
          //     Number(val?.quantity) >=
          //     Number(val?.Product_Variant?.general_stock)
          //   ) {
          //     setInstock(true);
          //   }
          // else if (
          //   props?.product?.allowed_quanitity
          //   &&
          //   Number(cart?.quantity) >= Number(props.product.allowed_quanitity)
          // ) {
          //   setErrors(
          //     `You can only buy max ${props.product.allowed_quanitity}`
          //   );
          // }
          // else {
          //   setInstock(false);
          //   cartQuantity("add");
          // }
          // }}
        >
          <FontAwesomeIcon className="sign_icon" icon={faPlus} />
        </div>
        {/* ) : (
          <p className="text-danger fw-bold">Out of stock</p>
        )} */}
      </section>
    </>
  );
}

export default Increment_decrement_btn_holder_add;
