import { useTranslations } from "next-intl";
import { Dispatch, SetStateAction } from "react";
import classes from "./quantity-control.module.css";
import { MinusSign, PlusSign } from "../Icons";

interface QuantityControl {
  initialCount: any;
  setInitialCount: Dispatch<SetStateAction<number>>;
  setValue: any;
  className: string;
}

const QuantityControl: React.FC<QuantityControl> = ({
  initialCount,
  setInitialCount,
  setValue,
  className,
}) => {
  const t = useTranslations("");

  const increment = () => {
    if (initialCount && initialCount >= 0) {
      setInitialCount((prevCount: number) => prevCount + 1);
      setValue("amount", (initialCount || 0) + 1);
    }
  };

  const decrement = () => {
    if (initialCount && initialCount > 1) {
      setInitialCount((prevCount: number) => prevCount - 1);
      setValue("amount", initialCount - 1);
    }
  };

  const handleInputChange = (e: { target: { value: string } }) => {
    const newValue = parseInt(e.target.value, 10);

    if (!isNaN(newValue)) {
      setInitialCount(newValue);
      setValue("amount", newValue);
    }
  };

  return (
    <div
      className={`${className} bg-whitee border-solid border bg-[#F5EBF64D] border-[#FEF0E1] py-3 px-4 w-max rounded-lg overflow-hidden flex rtl:flex-row-reverse items-center  ${classes["product-details-button-control"]}`}
      id="count"
    >
      <button
        type="button"
        onClick={decrement}
        className="w-max h-full cursor-pointer  hover:bg-slate-50 transition-colors text-primary"
      >
        <MinusSign disabled={initialCount <= 1} />
      </button>
      <div className="sm:max-w-48 px-4">
        <input
          name="amount"
          value={initialCount}
          onChange={handleInputChange}
          className="text-center bg-transparent w-full"
        />
      </div>

      <button
        type="button"
        onClick={increment}
        className=" w-max h-full cursor-pointer  hover:bg-slate-50 transition-colors text-primary"
      >
        <PlusSign />
      </button>
    </div>
  );
};

export default QuantityControl;