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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'carousel-selector-with-add-component',
    styleUrls: [
        './carousel-selector-with-add.component.scss',
    ],
    templateUrl: './carousel-selector-with-add.component.template.pug',
})
export class CarouselSelectorWithAddComponent {
    @Input()
    public ids: string[];
    @Input()
    public selectedId: string;
    @Input()
    public lessThanTwoItemsText: string;
    @Input()
    public noItemsText: string;

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

    public itemSelected(id: string) {
        this.onItemSelected.emit(id);
    }

    public addClicked() {
        this.onAddClicked.emit();
    }

    public hasLessThanTwoItems() {
        return this.ids.length < 2;
    }

    public getText() {
        return this.ids.length === 1 ?
            this.lessThanTwoItemsText : this.noItemsText;
    }
}