import { Carrot, Search } from "lucide-react";
import { useTranslation } from "react-i18next";
import { MealCategory } from "@/types/recipe.types";
import { useMealCategoryLabels } from "@/i18n/useMealCategoryLabel";

export type CategoryFilter = MealCategory | "all";

interface RecipeFiltersProps {
  active: CategoryFilter;
  onChange: (value: CategoryFilter) => void;
  search: string;
  onSearchChange: (value: string) => void;
  searchByIngredient: boolean;
  onSearchByIngredientChange: (value: boolean) => void;
}

export function RecipeFilters({
  active,
  onChange,
  search,
  onSearchChange,
  searchByIngredient,
  onSearchByIngredientChange,
}: RecipeFiltersProps) {
  const { t } = useTranslation();
  const categoryLabels = useMealCategoryLabels();

  const pills: Array<{ value: CategoryFilter; label: string }> = [
    { value: "all", label: t("common.all") },
    { value: MealCategory.Breakfast, label: categoryLabels[MealCategory.Breakfast] },
    { value: MealCategory.SecondBreakfast, label: categoryLabels[MealCategory.SecondBreakfast] },
    { value: MealCategory.Lunch, label: categoryLabels[MealCategory.Lunch] },
    { value: MealCategory.Dinner, label: categoryLabels[MealCategory.Dinner] },
  ];

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="flex flex-wrap gap-2">
          {pills.map((pill) => {
            const isActive = pill.value === active;
            return (
              <button
                key={String(pill.value)}
                type="button"
                onClick={() => onChange(pill.value)}
                className={`rounded-full px-4 py-1.5 text-sm font-medium transition ${
                  isActive
                    ? "bg-brand-600 text-white"
                    : "border border-slate-300 bg-white text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
                }`}
              >
                {pill.label}
              </button>
            );
          })}
        </div>

        <div className="relative md:w-72">
          {searchByIngredient ? (
            <Carrot className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-brand-500" />
          ) : (
            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          )}
          <input
            type="search"
            value={search}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder={searchByIngredient ? t("recipes.searchByIngredient") : t("recipes.searchRecipes")}
            className="input pl-9"
            aria-label={
              searchByIngredient ? t("recipes.searchByIngredientAria") : t("recipes.searchByNameAria")
            }
          />
        </div>
      </div>

      <label className="inline-flex w-fit cursor-pointer select-none items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
        <input
          type="checkbox"
          checked={searchByIngredient}
          onChange={(e) => onSearchByIngredientChange(e.target.checked)}
          className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
        />
        {t("recipes.searchByIngredientLabel")}
      </label>
    </div>
  );
}
