import { Component, Input, OnInit, Output, ViewChild, EventEmitter } from '@angular/core';
import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { Site } from 'src/app/core/interfaces/site/site';
@Component({
  selector: 'app-slide-sites',
  templateUrl: './slide-sites.component.html',
  styleUrls: ['./slide-sites.component.scss'],
})
export class SlideSitesComponent implements OnInit {
  icon_chevron_up = faChevronCircleUp;
  @ViewChild('album-rotator-holder') albumRotator: any;
  @Input() sites!: Site[];
  @Output() emitAllyId = new EventEmitter();

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    autoplay: false,
    autoplayTimeout: 2000,
    autoplayHoverPause:true,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    margin:10,
    navSpeed: 700,
    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
    nav: true,
    responsive: {
        0: {
          items: 1,
          nav: true
        },
        600: {
          items: 1,
          nav: true
        },
        1000: {
          items: 3,
          nav: true,
          loop: true
        },
        1500: {
          items: 4,
          nav: true,
          loop: true
        }
      }
  }

  constructor() {}

  ngOnInit() {}

  handlePatternAllyId(allyId: number){
    this.emitAllyId.emit(allyId);
  }

  showInformation(index:number){
    this.sites[index].show_information=!this.sites[index].show_information;
  }

}