import React, {ChangeEvent} from "react";
import {Minus, Plus} from "lucide-react";
import IconButton from "@/components/ui/IconButton";
import TextInput from "@/components/form/TextInput";

interface OrderInputProps {
    value: string;
    setValue: (e: ChangeEvent<HTMLInputElement>) => void;
    placeholder: string;
    order: number;
    setOrder: (order: number) => void;
    onAdd: () => Promise<void>;
    isAddDisabled?: boolean;
}

export default function OrderInput(
    {
        value,
        setValue,
        placeholder,
        order,
        setOrder,
        onAdd,
        isAddDisabled = false
    }: OrderInputProps) {
    
    function decrementOrder(): void {
        if (order > 0) {
            setOrder(order - 1);
        }
    }
    
    function incrementOrder(): void {
        setOrder(order + 1);
    }
    
    return (
        <div className="flex items-center gap-2">
            <div className="flex items-center gap-1 shrink-0">
                <IconButton
                    icon={Minus}
                    variant="muted"
                    size="sm"
                    onClick={decrementOrder}
                    disabled={order <= 0}
                />
                <span className="text-muted text-xs w-5 h-5 rounded-md bg-tertiary text-center leading-5">
                    {order}
                </span>
                <IconButton
                    icon={Plus}
                    variant="muted"
                    size="sm"
                    onClick={incrementOrder}
                />
            </div>
            <div className="flex-1">
                <TextInput
                    value={value}
                    setValue={setValue}
                    placeholder={placeholder}
                />
            </div>
            <IconButton
                icon={Plus}
                variant="primary"
                onClick={onAdd}
                disabled={isAddDisabled}
            />
        </div>
    );
}