import { CurrencyPipe } from '@angular/common';
import { Component, inject, computed, signal } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { RouterLink } from '@angular/router';

import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
import { ModifierService } from '../modifier.service';

export interface ModifierListFormData {
  menuCategory: string | null;
}

@Component({
  selector: 'app-modifier-list',
  templateUrl: './modifier-list.component.html',
  styleUrls: ['./modifier-list.component.css'],
  imports: [
    CurrencyPipe,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatOptionModule,
    MatSelectModule,
    MatTableModule,
    FormField,
    RouterLink,
  ],
})
export class ModifierListComponent {
  private modifierService = inject(ModifierService);
  private modifierCategoryService = inject(ModifierCategoryService);

  modifierCategoriesResource = this.modifierCategoryService.list();
  listResource = this.modifierService.list();

  modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);

  formModel = signal<ModifierListFormData>({
    menuCategory: '',
  });

  form = form(this.formModel);

  menuCategoryFilter = computed(() => this.formModel().menuCategory);

  dataSource = computed(() => {
    const items = this.listResource.value() ?? [];
    const cat = this.menuCategoryFilter();
    if (cat) {
      return items.filter((x) => x.modifierCategory?.id === cat);
    }
    return items;
  });

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
}