import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output,
} from '@angular/core';

import {
    ANIMATION_DEFAULTS_CONST,
    fadeInOutAnimation,
} from './../../helpers/animations/index';

@Component({
    animations: [
        fadeInOutAnimation(),
        fadeInOutAnimation({
            animationName: 'fadeInAnimation',
            animationTimingsEnter: ANIMATION_DEFAULTS_CONST.animationTimings,
            animationTimingsLeave: '0s',
        }),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'multi-filter-component',
    styleUrls: [
        './multi-filter.component.scss',
    ],
    templateUrl: './multi-filter.component.template.pug',
})
export class MultiFilterComponent {
    @Input()
    public label: string;
    @Input()
    public emptyLabel: string;
    @Input()
    public possibleFilters: string[] = [];
    @Input()
    public selectedFilters: string[] = [];
    @Input()
    public isFilterSelectionVisible = false;

    @Output()
    public onFiltersChanges = new EventEmitter<string[]>();
    @Output()
    public onShowFilters = new EventEmitter();

    public emitFiltersChanged(newFilters: string[]) {
        this.onFiltersChanges.emit(
            newFilters,
        );
    }

    public showFilters() {
        this.onShowFilters.emit();
    }

    public selectFilter(filterToSelect: string) {
        if (!this.isSelected(filterToSelect)) {
            this.emitFiltersChanged(
                [...this.selectedFilters, filterToSelect],
            );
        }
    }

    public deselectFilter(filterToDeselect: string) {
        this.emitFiltersChanged(this.selectedFilters
            .filter((filter) => (
               filter !== filterToDeselect
            )),
        );
    }

    public isSelected(filter: string) {
        return this.selectedFilters.includes(filter);
    }
}