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

import {
    ImageSelectorListOptionInterface,
} from './../../models/index';

@Component({
    selector: 'image-selector-list-component',
    styleUrls: [
        './image-selector-list.component.scss',
    ],
    templateUrl: './image-selector-list.component.template.pug',
})
export class ImageSelectorListComponent {
    @Input()
    public imageSelectorListOptions: ImageSelectorListOptionInterface[];
    @Input()
    public selectedSrc: string;
    @Input()
    public isLarge = false;

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

    public selectImage({
        src,
    }: ImageSelectorListOptionInterface) {
        if (this.selectedSrc !== src) {
            this.onSelected.emit(src);
        }
    }

    public isSelected({
        src,
    }: ImageSelectorListOptionInterface) {
        return src === this.selectedSrc;
    }

    public trackBySrc({
        src,
    }: ImageSelectorListOptionInterface) {
        return src;
    }
}