import { Component, OnInit, Input, OnDestroy, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
import { filter, map,takeWhile } from 'rxjs/operators';
import { EsbImageSliderPinsComponent } from './pins/esb-image-slider-pins.component';
import { EsbImageSliderConfig } from '../esb-image-slider-config';
import { EsbImageSliderHandlerDirective } from '../directives/esb-image-slider-handler.directive';
import { EsbImageSliderArrowsComponent } from './arrows/esb-image-slider-arrows.component';
import { EsbImageSliderService } from '../services/esb-image-slider.service';




@Component({
  selector: 'esb-image-slider',
  templateUrl: './esb-image-slider.component.html',
  styleUrls: ['./esb-image-slider.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class EsbImageSliderComponent implements OnInit, OnDestroy {
  @Input() private dataSource: any;
  @Input() private config: EsbImageSliderConfig;

  @ViewChild(forwardRef(() => EsbImageSliderHandlerDirective)) private carouselHandlerDirective: EsbImageSliderHandlerDirective;
  @ViewChild(EsbImageSliderArrowsComponent) private carouselArrowsComponent: EsbImageSliderArrowsComponent;
  @ViewChild(EsbImageSliderPinsComponent) private pinsComponent: EsbImageSliderPinsComponent;

  private autoplayIntervalId;
  private preventAutoplay: boolean;

  public loadedImages: string[];
  public loadedImagesTooltips: string[];
  public galleryLength: number;
  public currentSlide = 0;
  showTooltip=false;

  constructor(private esbImageSliderService: EsbImageSliderService) { }

  ngOnInit() {
    this.initData();
  }

  public initData() {
   
    this.galleryLength = this.dataSource.images.length;  
    const [showImmediate, ...showWhenLoad] = this.dataSource.images;   
    this.loadedImagesTooltips=this.dataSource.tooltips;   
    this.loadedImages = [showImmediate];

    if (this.galleryLength < 2) {
      return;
    }

    this.esbImageSliderService.init(showWhenLoad, this.config);

    this.esbImageSliderService.onImageLoad().pipe(
      takeWhile(() => !!this.galleryLength)
    )  .subscribe(
        (image) => this.loadedImages.push(image)
      );

    if (this.config.autoplay) {
      this.config.autoplayDelay = this.config.autoplayDelay < 1000 ? 1000 : this.config.autoplayDelay;

      const minWidth = this.config.stopAutoplayMinWidth? this.config.stopAutoplayMinWidth:100;

      this.esbImageSliderService.onResize(minWidth, true)
      .pipe(takeWhile(() => !!this.galleryLength)) 
        .subscribe(
        (isMinWidth) => {
          this.preventAutoplay = !isMinWidth;
          this.onHandleAutoplay(!this.config.autoplay);
        }
      );
    }
  }

  public onChangeSlide(direction: string): void {
    if (direction === 'prev') {
      this.currentSlide = this.currentSlide === 0 ? this.loadedImages.length - 1 : --this.currentSlide;
    } else {
      this.currentSlide = this.currentSlide === this.loadedImages.length - 1 ? 0 : ++this.currentSlide;
    }
    this.carouselHandlerDirective.setNewSlide(this.currentSlide, direction);
    this.disableCarouselNavBtns();
  }

  public onChangeSlideIndex(index: number): void {
    if (index === this.currentSlide) {
      return;
    }

    const direction = index > this.currentSlide ? 'next' : 'prev';

    this.currentSlide = index;
    this.carouselHandlerDirective.setNewSlide(this.currentSlide, direction);
    this.disableCarouselNavBtns();
  }

  public onHandleAutoplay(stopAutoplay): void {
    this.showTooltip=stopAutoplay;
    if (stopAutoplay || this.preventAutoplay) {
      clearInterval(this.autoplayIntervalId);
      return;
    }

    this.startAutoplay(this.config.autoplayDelay);
  }

  private startAutoplay(delay: number): void {
    this.autoplayIntervalId = setInterval(() => {
      this.onChangeSlide('next');
      this.pinsComponent.disableNavButtons();
      this.carouselArrowsComponent.disableNavButtons();
    }, delay);
  }

  private disableCarouselNavBtns(): void {
     this.carouselArrowsComponent.disableNavButtons();
    this.pinsComponent.disableNavButtons();
  }

  ngOnDestroy() {
    if (this.autoplayIntervalId) {
      clearInterval(this.autoplayIntervalId);
    }
  }
}