import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    Input,
    OnInit,
} from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'background-image-cycler-component',
    styleUrls: [
        './background-image-cycler.component.scss',
    ],
    templateUrl: 'background-image-cycler.component.template.pug',
})
export class BackgroundImageCyclerComponent implements OnInit {
    @Input()
    public imageUrls: string[];
    @Input()
    public timeBeforeCycle = 7500;

    public currentImageUrl: string;

    constructor(
        private _elementRef: ElementRef,
        private _changeDetectorRef: ChangeDetectorRef,
    ) {}

    public ngOnInit() {
        this.nextImage();
    }

    public nextImage() {
        const currentIndex = this.imageUrls.indexOf(
            this.currentImageUrl,
        );
        const nextIndex = currentIndex + 1 < this.imageUrls.length ?
            currentIndex + 1 : 0;
        this.currentImageUrl = this.imageUrls[nextIndex];
        this._changeDetectorRef.markForCheck();
        setTimeout(() => {
            this.nextImage();
        }, this.timeBeforeCycle);
    }

    public isSelected(imageUrl: string) {
        return imageUrl === this.currentImageUrl;
    }
}