import {Plus, X} from "lucide-react"
import type {IngredientModel} from "../../models/IngredientModel"
import Button from "../basics/Button"
import {ButtonType} from "../basics/BasicButtonDefinitions"
import HorizontalInputGroupLayout from "../basics/HorizontalInputGroupLayout.tsx";


type IngredientListEditorProps = {
    ingredients: IngredientModel[]
    onChange: (ingredients: IngredientModel[]) => void
}

/**
 * Editor for handling the ingredient list
 *
 * Ingredients can be edited, added and removed
 * @param ingredient List of IngredientModels describing the ingredient
 * @param onChange Method to call on changing an ingredient.
 */
export function IngredientListEditor({ingredients, onChange}: IngredientListEditorProps) {
    const handleUpdate = (
        index: number,
        field: keyof IngredientModel,
        value: string | number | undefined
    ) => {
        const updated = ingredients.map((ing, i) => {
            if (i !== index) return ing;

            if (field === "amount") {
                // Handle optional numeric value
                if (value === undefined || value === "") {
                    const {amount, ...rest} = ing; // remove the field
                    return rest as IngredientModel;
                }

                // valid number
                return {...ing, amount: Number(value)};
            }

            // handle other fields normally
            return {...ing, [field]: value};
        });

        onChange(updated);
    };

    const handleAdd = () => {
        onChange([...ingredients, {name: "", unit: ""}])
    }

    const handleRemove = (index: number) => {
        onChange(ingredients.filter((_, i) => i !== index))
    }

    return (
        <div>
            {ingredients.map((ing, index) => (
                <HorizontalInputGroupLayout key={index}>
                    <input
                        type="number"
                        placeholder="Menge"
                        value={ing.amount === undefined || ing.amount === null ? "" : ing.amount}
                        onChange={e => {
                            const value = e.target.value;
                            handleUpdate(index, "amount", value === "" ? undefined : Number(value));
                        }}
                    />
                    <input
                        className="w-20"
                        placeholder="Einheit"
                        value={ing.unit ?? ""}
                        onChange={e => handleUpdate(index, "unit", e.target.value)}
                    />
                    <input
                        placeholder="Name"
                        value={ing.name}
                        onChange={e => handleUpdate(index, "name", e.target.value)}
                    />
                    <Button
                        onClick={() => handleRemove(index)}
                        icon={X}
                        buttonType={ButtonType.DarkButton}
                    />
                </HorizontalInputGroupLayout>
            ))}
            <Button
                onClick={handleAdd}
                icon={Plus}
                text={"Zutat hinzufügen"}
                buttonType={ButtonType.PrimaryButton}
            />
        </div>
    )
}
