import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { apiLotService } from 'src/app/core/services/api/api.lot.service';


@Component({
  selector: 'app-pictures-page',
  templateUrl: './pictures-page.component.html',
  styleUrls: ['./pictures-page.component.css']
})

export class PicturesPageComponent implements OnInit  {
  
  @Input() value: any;
  @Output() valueChange = new EventEmitter<any>();

  url: string = '';
  images: any[] = [];    
  position: "bottom" | "top" | "left" | "right" | undefined = 'top';
  responsiveOptions: any[] | undefined;

  constructor(
    private titleService: Title,
    private apiLotService: apiLotService,
  ) {   
  }

  ngOnInit() {
    this.titleService.setTitle('Jucundus - Users');
    this.responsiveOptions = [
      {
          breakpoint: '1024px',
          numVisible: 5
      },
      {
          breakpoint: '768px',
          numVisible: 3
      },
      {
          breakpoint: '560px',
          numVisible: 1
      }
    ];
  }

  getPictures(): void {
    this.apiLotService.getPictures(this.url).subscribe( Pictures => {
      this.images = [];
      const newImages = [...this.images];
            
      Pictures.forEach((picture: any) => {
        newImages.push({
          itemImageSrc: picture,
          thumbnailImageSrc: picture,
          alt: "img",
          title: "img1"
        });
      }) 
      this.images = newImages;
      console.log(this.images);     
      this.updateValue(this.images);
    })
  }

  updateValue(newValue: any) {
    this.value = newValue;
    this.valueChange.emit(this.value);
  }

  openFullscreen(event: any) {
    const element = event.target;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
    }
}
}