import type { IngredientView, UnitView } 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 is kept as a raw string while editing (not parsed to a number until submit) so an in-progress/invalid value doesn't fight the input; `unit` picks from `unitsCatalog` (a closed reference list, see `Unit` in schema.prisma) rather than free text. */
export function IngredientRow({
  ingredient,
  quantity,
  unitId,
  unitsCatalog,
  onQuantityChange,
  onUnitChange,
  onRemove,
}: {
  ingredient: IngredientView;
  quantity: string;
  unitId: number | null;
  unitsCatalog: UnitView[];
  onQuantityChange: (quantity: string) => void;
  onUnitChange: (unitId: number) => 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")}
      />
      <select
        className="ingredient-row__unit"
        value={unitId ?? ""}
        onChange={(e) => onUnitChange(Number(e.target.value))}
        aria-label={t("recipes.form.unitLabel")}
      >
        <option value="" disabled>
          {t("recipes.form.unitPlaceholder")}
        </option>
        {unitsCatalog.map((unit) => (
          <option key={unit.id} value={unit.id}>
            {t(`catalog.units.${unit.key}`)}
          </option>
        ))}
      </select>
      <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>
  );
}