import { SetStateAction } from "react";
import { FaPlus, FaMinus } from "react-icons/fa6";
import { useDispatch, useSelector } from "react-redux";
import { TrashIcon } from "../../../assets/svgs/Icons";
import { AppDispatch } from "@/store/store";
import { removeProductFromCart } from "@/store/cart";
import { useTranslations } from "next-intl";
import toast from "react-hot-toast";

interface Props {
  quantity: number;
  isCart?: boolean;
  setQuantity: React.Dispatch<SetStateAction<number>>;
  className?: string;
  handleUpdate?: (quantity: number) => void;
  id?:string;
  minUnitPerOrder?:number;
}

export default function QuantityInput({quantity,setQuantity, className = "", handleUpdate, isCart = false,id,minUnitPerOrder = 1}: Props) {
  const dispatch = useDispatch<AppDispatch>();
  const t = useTranslations();

  const handleChange = (delta: number) => {
    setQuantity((prev) => {
      const updated = prev + delta;
      if (updated < minUnitPerOrder) {
        toast.error(t("Messages.min_quantity_order", { count: minUnitPerOrder }));
        return prev;
      }
      if (handleUpdate) handleUpdate(updated);
      return updated;
    });
  };


  return (
    <div key={`quantity_wrapper_${quantity}`} className={`flex items-center space-x-2 quantity-wrapper ${className}`}>
      {isCart && quantity <= 1 ? (
            <button
              className="quantity-btn disabled:opacity-20 disabled:cursor-not-allowed"
              aria-label="Decrease quantity"
              onClick={()=>dispatch(removeProductFromCart({id}))}
            >
              <TrashIcon/>
            </button>
      ):(
        <button
          onClick={() => handleChange(-1)}
          className="quantity-btn text-primary disabled:opacity-20 disabled:cursor-not-allowed"
          disabled={quantity <= 1}
          aria-label="Decrease quantity"
        >
          <FaMinus className="w-5 h-5" />
        </button>
      )}

      <p 
          key={`quantity_${quantity}`} 
          className="quantity-text text-lg font-medium"
      >
        {quantity}
      </p>

      <button
        onClick={() => handleChange(1)}
        className="quantity-btn disabled:opacity-20 disabled:cursor-not-allowed"
        aria-label="Increase quantity"
      >
        <FaPlus className="w-4 h-4" />
      </button>
    </div>
  );
}