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-chips-component',
    styleUrls: [
        './multi-filter-chips.component.scss',
    ],
    templateUrl: './multi-filter-chips.component.template.pug',
})
export class MultiFilterChipsComponent {
    @Input()
    public possibleFilters: string[] = [];
    @Input()
    public selectedFilters: string[] = [];
    @Input()
    public noSelectedFiltersLabel: string = 'All';

    @Output()
    public onToggleFilter = new EventEmitter<string>();

    @Output()
    public onClearAllFilters = new EventEmitter();

    public get noSelectedFilters() {
        return this.selectedFilters.length > 0
            ? false
            : true;
    }

    public isSelected(filter: string) {
        return Boolean(
            this.selectedFilters.length
            && this.selectedFilters.includes(filter),
        );
    }

    public toggleFilter(filter: string) {
        this.onToggleFilter.emit(filter);
    }

    public clearAllFilters() {
        if (!this.noSelectedFilters) {
            this.onClearAllFilters.emit();
        }
    }
}