import type { IngredientView } from "@batch-cooking/shared";
import { useTranslation } from "react-i18next";
import { AllergenBadges } from "./AllergenBadges";
import { DietBadges } from "./DietBadges";
import { ReproducibleBadge } from "./ReproducibleBadge";
import { IngredientTypeIcon } from "./ingredient-icons";
import "./recipes.scss";

/** One selected ingredient line in the recipe form — the ingredient itself (picked via `IngredientPicker`) plus its quantity/unit for this recipe. Quantity/unit are kept as raw strings while editing (not parsed to a number until submit) so an in-progress/invalid value doesn't fight the input. */
export function IngredientRow({
  ingredient,
  quantity,
  unit,
  onQuantityChange,
  onUnitChange,
  onRemove,
}: {
  ingredient: IngredientView;
  quantity: string;
  unit: string;
  onQuantityChange: (quantity: string) => void;
  onUnitChange: (unit: string) => void;
  onRemove: () => void;
}) {
  const { t } = useTranslation();

  return (
    <li className="ingredient-row">
      <span className="ingredient-row__icon" aria-hidden="true">
        <IngredientTypeIcon icon={ingredient.icon} />
      </span>
      <span className="ingredient-row__name">{t(`catalog.ingredients.${ingredient.key}`)}</span>
      <input
        type="number"
        min="0"
        step="any"
        className="ingredient-row__quantity"
        value={quantity}
        onChange={(e) => onQuantityChange(e.target.value)}
        aria-label={t("recipes.form.quantityLabel")}
      />
      <input
        type="text"
        className="ingredient-row__unit"
        value={unit}
        onChange={(e) => onUnitChange(e.target.value)}
        placeholder={t("recipes.form.unitPlaceholder")}
        aria-label={t("recipes.form.unitLabel")}
      />
      <AllergenBadges allergens={ingredient.allergens} />
      <DietBadges diets={ingredient.diets} />
      <ReproducibleBadge
        reproducible={ingredient.reproducible}
        searchLabel={t(`catalog.ingredients.${ingredient.key}`)}
      />
      <button
        type="button"
        className="ingredient-row__remove"
        onClick={onRemove}
        title={t("recipes.form.removeIngredient")}
      >
        ✕
      </button>
    </li>
  );
}