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 default class MultiFilterComponent {
    @Input()
    public possibleFilters: string[] = [];
    @Input()
    public noneAppliedText: string;

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

    public isFilterSelectionVisible = false;
    public selectedFilters: string[] = [];

    public emitFiltersChanged() {
        this.onFiltersChanges.emit(
            this.selectedFilters,
        );
    }

    public toggleFilters() {
        this.isFilterSelectionVisible =
            !this.isFilterSelectionVisible;
    }

    public selectFilter(filterToSelect: string) {
        if (!this.selectedFilters.includes(filterToSelect)) {
            this.selectedFilters.push(filterToSelect);
            this.emitFiltersChanged();
        }
    }

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