import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { MealCategory, MEAL_CATEGORY_I18N_KEYS } from '../../core/models/recipe.models';

export type CategoryFilter = MealCategory | 'all';

@Component({
  selector: 'app-recipe-filters',
  standalone: true,
  imports: [FormsModule, TranslatePipe],
  template: `
    <div class="flex flex-col gap-4">
      <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div class="flex flex-wrap gap-2">
          @for (pill of pills; track pill.value) {
            <button
              type="button"
              (click)="onChange.emit(pill.value)"
              class="rounded-full px-4 py-1.5 text-sm font-medium transition"
              [class]="
                pill.value === active
                  ? '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 class="relative md:w-72">
          @if (searchByIngredient) {
            <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-brand-500" aria-hidden="true">🥕</span>
          } @else {
            <svg
              class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              aria-hidden="true"
            >
              <circle cx="11" cy="11" r="8" />
              <path d="m21 21-4.3-4.3" />
            </svg>
          }
          <input
            type="search"
            [ngModel]="search"
            (ngModelChange)="onSearchChange.emit($event)"
            class="input pl-9"
            [placeholder]="
              searchByIngredient
                ? ('recipes.searchByIngredient' | translate)
                : ('recipes.searchRecipes' | translate)
            "
            [attr.aria-label]="
              searchByIngredient
                ? ('recipes.searchByIngredientAria' | translate)
                : ('recipes.searchByNameAria' | translate)
            "
          />
        </div>
      </div>

      <label class="inline-flex w-fit cursor-pointer select-none items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
        <input
          type="checkbox"
          [ngModel]="searchByIngredient"
          (ngModelChange)="onSearchByIngredientChange.emit($event)"
          class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
        />
        {{ 'recipes.searchByIngredientLabel' | translate }}
      </label>
    </div>
  `,
})
export class RecipeFiltersComponent {
  private readonly translate = inject(TranslateService);

  @Input({ required: true }) active!: CategoryFilter;
  @Output() onChange = new EventEmitter<CategoryFilter>();
  @Input({ required: true }) search!: string;
  @Output() onSearchChange = new EventEmitter<string>();
  @Input() searchByIngredient = false;
  @Output() onSearchByIngredientChange = new EventEmitter<boolean>();

  get pills(): Array<{ value: CategoryFilter; label: string }> {
    return [
      { value: 'all', label: this.translate.instant('common.all') },
      ...[
        MealCategory.Breakfast,
        MealCategory.SecondBreakfast,
        MealCategory.Lunch,
        MealCategory.Dinner,
      ].map((cat) => ({
        value: cat as CategoryFilter,
        label: this.translate.instant(MEAL_CATEGORY_I18N_KEYS[cat]),
      })),
    ];
  }
}
