import { ChangeDetectionStrategy, computed, Component, inject, model, output } from '@angular/core';
import { FilterInput, FilterService } from '../../core';
import { OverlayModule } from '@angular/cdk/overlay';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { isaActionChevronLeft, isaActionChevronRight } from '@isa/icons';
import { InputRendererComponent } from '../../inputs';
import { FilterActionsComponent } from '../../actions';

/**
 * A component that renders a filter menu with input fields and actions.
 * It allows users to reset or apply filters and manages the active filter input.
 */
@Component({
  selector: 'filter-filter-menu',
  templateUrl: 'filter-menu.component.html',
  styleUrls: ['./filter-menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [InputRendererComponent, OverlayModule, NgIconComponent, FilterActionsComponent],
  providers: [provideIcons({ isaActionChevronLeft, isaActionChevronRight })],
})
export class FilterMenuComponent {
  /**
   * The filter service used to manage filter inputs and their states.
   */
  filter = inject(FilterService);

  /**
   * Tracks the currently active filter input in the menu.
   */
  activeInput = model<FilterInput | undefined>(undefined);

  /**
   * A computed list of filter inputs belonging to the 'filter' group.
   */
  filterInputs = computed(() => this.filter.inputs().filter((input) => input.group === 'filter'));

  /**
   * Emits an event when the filter inputs are reset.
   */
  reseted = output<void>();

  /**
   * Emits an event when the filter inputs are applied.
   */
  applied = output<void>();
}
