"use client";

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

interface SelectVariants {
  color: string,
  size: string,
  quantity: number,
  regular_price: number,
  purchase_cost: number,
  special_price: number,
}

interface MultiSelectQuantityProps {
  id: string;
  placeholder: string;
  placeholder2: string,
  placeholder3: string,
  placeholder4: string,
  placeholder5: string,
  placeholder6: string,

  value: SelectVariants[];
  onChange: (value: SelectVariants[]) => void;
  onRemove: (value: SelectVariants[]) => void;
}

const MultiSelectQuantity2: React.FC<{
  id: string;
  placeholder: string;
  placeholder2: string,
  placeholder3: string,
  placeholder4: string,
  placeholder5: string,
  placeholder6: string,
  value: SelectVariants[];
  onChange: (value: SelectVariants) => void;
  onRemove: (value: SelectVariants) => void;
}> = ({ id, placeholder, value, onChange, onRemove }) => {
  const [inputValue, setInputValue] = useState("");
  const [inputValue2, setInputValue2] = useState("");
  const [quantityValue, setQuantityValue] = useState<number>(0);
  const [regularPriceValue, setRegularPriceValue] = useState<number>(0);
  const [purchaseCostValue, setPurchaseCostValue] = useState<number>(0);
  const [specialPriceValue, setSpecialPriceValue] = useState<number>(0);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const handleAdd = () => {
    if (!inputValue || !quantityValue) {
      setError(true);
      setErrorMessage("Please fill the fields");
      return;
    }
    onChange({
      color: inputValue.toLocaleUpperCase(),
      size: inputValue2.toLocaleUpperCase(),
      regular_price: regularPriceValue,
      purchase_cost: purchaseCostValue,
      special_price: specialPriceValue,
      quantity: quantityValue,
      
    });
    setInputValue("");
    setQuantityValue(0);
    setRegularPriceValue(0);
    setPurchaseCostValue(0);
    setSpecialPriceValue(0);
    setError(false);
  };

  return (
    <div>
      <div className="flex w-[700px] gap-1">
        <Input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder={placeholder}
        />

        <Input
            type="text"
            value={inputValue2}
            onChange={(e)=> setInputValue2(e.target.value)}
            placeholder='Size'
        />

        <Input
          type="number"
          value={quantityValue}
          onChange={(e) => setQuantityValue(parseInt(e.target.value))}
          placeholder="Quantity"
        />

        <Input
          type="number"
          value={regularPriceValue}
          onChange={(e) => setRegularPriceValue(parseInt(e.target.value))}
          placeholder="Regular Price" 
        />

        <Input
          type="number"
          value={purchaseCostValue}
          onChange={(e) => setPurchaseCostValue(parseInt(e.target.value))}
          placeholder="Purchase Cost" 
        />

        <Input
          type="number"
          value={specialPriceValue}
          onChange={(e) => setSpecialPriceValue(parseInt(e.target.value))}
          placeholder="Special Price"
        />


        <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.color}-{item.size} - {item.quantity} - {item.regular_price} - {item.purchase_cost} - {item.special_price}
            <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 MultiSelectQuantity2;