import { ChangeDetectionStrategy, Component, computed, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
import { IListable } from '../models';
import { IconButtonTypes } from '../../buttons';
import { SearchService } from '../../search';
import { FilterService } from '../../filtering';
import { List } from '../../utils';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
    selector: 'iqser-page-header',
    templateUrl: './page-header.component.html',
    styleUrls: ['./page-header.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageHeaderComponent<T extends IListable> {
    readonly searchPositions = SearchPositions;
    readonly iconButtonTypes = IconButtonTypes;

    @Input() pageLabel?: string;
    @Input() searchInputId?: string;
    @Input() showCloseButton = false;
    @Input() hideResetButton = false;
    @Input() actionConfigs?: List<ActionConfig>;
    @Input() buttonConfigs?: List<ButtonConfig>;
    @Input() viewModeSelection?: TemplateRef<unknown>;
    @Input() searchPlaceholder?: string;
    @Input() searchWidth?: number | 'full';
    @Input() helpModeKey?: 'dossier' | 'document';
    @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
    @Output() readonly closeAction = new EventEmitter();

    readonly filters;
    readonly searchValue;
    readonly showResetFilters;

    constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService<T>) {
        this.filters = computed(() => this.filterService.filterGroups().filter(fG => fG.icon));
        this.searchValue = toSignal(this.searchService.valueChanges$);
        this.showResetFilters = computed(() => {
            return this.filterService.showResetFilters() || this.searchValue();
        });
    }

    get filterHelpModeKey() {
        return this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
    }

    resetFilters(): void {
        this.filterService.reset();
        this.searchService.reset();
    }

    trackByLabel<K extends { label?: string }>(_index: number, item: K): string | undefined {
        return item.label;
    }
}