import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ImageDTO } from '@swagger/cat';
import { UiModalRef } from '@ui/modal';

@Component({
  selector: 'modal-images',
  templateUrl: 'images.component.html',
  styleUrls: ['images.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalImagesComponent {
  images = this.modalRef.data.images;
  activeImage = this.modalRef.data.images[0];

  constructor(private modalRef: UiModalRef<void, { title: string; images: ImageDTO[] }>) {}

  nextImage() {
    const index = this.images.indexOf(this.activeImage);
    if (index + 1 >= this.images.length) {
      this.activeImage = this.images[0];
    } else {
      this.activeImage = this.images[index + 1];
    }
  }

  prevImage() {
    const index = this.images.indexOf(this.activeImage);
    if (index - 1 < 0) {
      this.activeImage = this.images[this.images.length - 1];
    } else {
      this.activeImage = this.images[index - 1];
    }
  }

  close() {
    this.modalRef.close();
  }
}
