import Button from "../basics/Button.tsx";
import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
import {IngredientListEditor} from "./IngredientListEditor.tsx";
import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";
import type {IngredientModel} from "../../models/IngredientModel.ts";
import HorizontalInputGroupLayout from "../basics/HorizontalInputGroupLayout.tsx";

type IngredientGroupEditorListItemProps = {
    /** The list item's index */
    index: number
    /** Model containing data for ingredient group */
    ingredientGroupModel: IngredientGroupModel
    /** Model containing data for ingredient group */
    handleUpdate(index: number, field: keyof IngredientGroupModel, value: string | IngredientModel[]): void
    /** Method for removing group */
    handleRemove(index: number): void
}

/**
 * List item representing an ingredient group
 * @param index The list item's index
 * @param ingredientGroupModel Model containing data for ingredient group
 * @param handleUpdate Model containing data for ingredient group
 * @param handleRemove Method for removing group
 */
export default function IngredientGroupEditorListItem({
                                                          index,
                                                          ingredientGroupModel,
                                                          handleUpdate,
                                                          handleRemove
                                                      }: IngredientGroupEditorListItemProps) {
    const updateIngredientList = (index: number, ingredientList: IngredientModel[]) => {
        handleUpdate(index, "ingredientList", ingredientList)
    }
    return (
        <div key={index} className="pb-4 border-b border-gray-400 mb-4">
            <HorizontalInputGroupLayout className="columns-2">
                <input
                    placeholder="Titel (Optional)"
                    value={ingredientGroupModel.title}
                    onChange={e => handleUpdate(index, "title", e.target.value)}
                />
                <Button
                    onClick={() => handleRemove(index)}
                    text={"Gruppe entfernen"}
                    buttonType={ButtonType.DarkButton}
                />
            </HorizontalInputGroupLayout>
            <IngredientListEditor
                ingredients={ingredientGroupModel.ingredientList}
                onChange={list => updateIngredientList(index, list)}
            />
        </div>
    )
}