"use client";

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { X } from "lucide-react";

interface SizeQuantity {
  title: string;
  quantity: number;
}

interface MultiSelectQuantityProps {
  id: string;
  placeholder: string;
  value: SizeQuantity[];
  onChange: (value: SizeQuantity[]) => void;
  onRemove: (value: SizeQuantity[]) => void;
}

const MultiSelectQuantity: React.FC<{
  id: string;
  placeholder: string;
  value: SizeQuantity[];
  onChange: (value: SizeQuantity) => void;
  onRemove: (value: SizeQuantity) => void;
}> = ({ id, placeholder, value, onChange, onRemove }) => {
  const [inputValue, setInputValue] = useState("");
  const [quantityValue, setQuantityValue] = useState(0);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const handleAdd = () => {
    if (!inputValue || !quantityValue) {
      setError(true);
      setErrorMessage("Please fill the fields");
      return;
    }
    onChange({
      title: inputValue.toLocaleUpperCase(),
      quantity: quantityValue,
    });
    setInputValue("");
    setQuantityValue(0);
    setError(false);
  };

  return (
    <div>
      <div className="flex w-[180px] gap-1">
        <Input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder={placeholder}
        />
        <Input
          type="number"
          value={quantityValue}
          onChange={(e) => setQuantityValue(parseInt(e.target.value, 10))}
          placeholder="Quantity"
        />
        <button
          className="bg-orange-400 py-2 px-4 rounded-md text-center text-black/80 hover:bg-orange-500 hover:text-white/90"
          type="button"
          onClick={handleAdd}
        >
          +
        </button>
      </div>
      {error && <p className="text-red-500 text-sm mt-1">{errorMessage}</p>}
      <div className="flex gap-1 flex-wrap mt-2">
        {value && value.map((item, index) => (
          <Badge key={index} className="bg-grey-1 text-white min-h-7">
            {item.title}-{item.quantity}
            <button
              title="Remove item"
              className="ml-1 rounded-full outline-none hover:bg-red-1"
              onClick={() => onRemove(item)}
              type="button"
            >
              <X className="h-3 w-3" />
            </button>
          </Badge>
        ))}
      </div>
    </div>
  );
};

export default MultiSelectQuantity;