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,
  stock,
  isCart,
}) {
  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);
    }
  };

  // const handleIncrement = async () => {
  //   if (val) {
  //     await cartQuantity("add");
  //   } else {
  //     setQuantity((prev) => prev + 1);
  //   }
  // };
  // const handleDecrement = async () => {
  //   if (val) {
  //     await cartQuantity("minus");
  //   } else {
  //     setQuantity((prev) => (prev > 1 ? prev - 1 : 1));
  //   }
  // };
  const currentQty = Number(val?.quantity ?? quantity);
  const handleIncrement = async () => {
    if (val) {
      if (currentQty >= stock) {
        setInstock(true);
        setError(`Only ${stock} quantity in stock`);
        return;
      }
      await cartQuantity("add");
    } else {
      if (currentQty >= stock) {
        setInstock(true);
        setError(`Only ${stock} quantity in stock`);
        return;
      }
      if (currentQty >= stock) {
        setError(`Only ${stock} quantity in stock`);
        return;
      }

      setInstock(false);
      setError("");
      setQuantity((prev) => prev + 1);
    }
  };

  const handleDecrement = async () => {
    if (val) {
      await cartQuantity("minus");
    } else {
      setInstock(false);
      setError("");
      setQuantity((prev) => (prev > 1 ? prev - 1 : 1));
    }
  };
  return (
    <>
      <section className="Increment_decrement_btn_holder">
        <div className="sign_holder" onClick={handleDecrement}>
          <FontAwesomeIcon className="sign_icon" icon={faMinus} />
        </div>
        <div className="number_holder">
          <span>{val?.quantity ?? quantity}</span>
        </div>
        {/* {Number(val?.Product_Variant?.general_stock) >= Number(quantity) ? ( */}
        <div
          className="sign_holder"
          onClick={handleIncrement}
          // onClick={() => {
          //   if (
          //     Number(val?.quantity) >=
          //     Number(val?.Product_Variant?.general_stock)
          //   ) {
          //     setInstock(true);
          //   } else {
          //     handleIncrement;
          //   }
          // }}
        >
          <FontAwesomeIcon className="sign_icon" icon={faPlus} />
        </div>
      </section>
    </>
  );
}

export default Increment_decrement_btn_holder_add;
