import type { DietView } from "@batch-cooking/shared";
import { useTranslation } from "react-i18next";
import { CheckboxOption } from "../../../components/ui/Checkbox";
import "../recipes.scss";

/**
 * Multi-select (checkbox grid, same pattern as `AllergySelect`) for the
 * regime(s) a recipe is tagged as suiting — manually chosen by whoever
 * creates/edits it (see `RecipeFormPage`), a reminder shown in the catalog
 * table and detail panel (`DietBadges`), not computed from ingredients.
 */
export function DietTagSelect({
  diets,
  value,
  onChange,
}: {
  diets: DietView[];
  value: number[];
  onChange: (dietIds: number[]) => void;
}) {
  const { t } = useTranslation();

  function toggle(id: number) {
    onChange(value.includes(id) ? value.filter((existing) => existing !== id) : [...value, id]);
  }

  return (
    <fieldset className="diet-tag-select">
      <legend>{t("recipes.form.dietsLabel")}</legend>
      {diets.map((diet) => {
        const checked = value.includes(diet.id);
        return (
          <CheckboxOption key={diet.id} checked={checked} onChange={() => toggle(diet.id)}>
            {t(`catalog.diets.${diet.key}`)}
          </CheckboxOption>
        );
      })}
    </fieldset>
  );
}
