import { Component, Input, OnInit } from '@angular/core';
import { SliderData } from '../../../interfaces/slider.interface';
import { MatDialog } from '@angular/material/dialog';
import { OpenImageSliderComponent } from '../dialogs/open-image-slider/open-image-slider.component';

@Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrl: './slider.component.css',
    standalone: false
})
export class SliderComponent{
  @Input() arrImages: Array<SliderData>;
  @Input() width: string;
  @Input() height: string;
  public imageSelected: number;

  constructor( private _dialog: MatDialog ) {
    this.arrImages = []
    this.imageSelected = 0;
    this.width = 'auto';
    this.height = 'auto';
  }

  public openImagen(imagen: string) {
    this._dialog.open(OpenImageSliderComponent, {
      data: imagen
    });
    // window.open(imagen, '_blank');
  }

  public previousImage() {
    if (this.imageSelected - 1 >= 0) {
      this.imageSelected--;
    } else {
      this.imageSelected = this.arrImages.length - 1;
    }
  }

  public nextImage() {
    if (this.imageSelected + 1 < this.arrImages.length) {
      this.imageSelected++;
    } else {
      this.imageSelected = 0;
    }
  }

  public selectedImage(index:number) {
    this.imageSelected = index;
  }
}
