import {
  Directive,
  ElementRef,
  Renderer2,
  HostListener,
  AfterViewInit
} from '@angular/core';

@Directive({
  selector: '[appSlider]'
})

export class SliderDirective implements AfterViewInit {

  filterItems: HTMLCollectionOf<HTMLElement>;
  performanceBlocks: HTMLCollectionOf<HTMLElement>;
  performanceTitle: HTMLCollectionOf<HTMLElement>;
  lastPerformanceIndex: number;
  performanceIndex = 0;
  performanceBlocksWidth = 0;
  performanceTitlesWidth = 0;

  constructor(
    private element: ElementRef,
    private renderer: Renderer2) { }

  ngAfterViewInit() {

    this.filterItems =
      (document.getElementsByClassName('arrow') as HTMLCollectionOf<HTMLElement>);

    this.performanceBlocks =
      (document.getElementsByClassName('performance') as HTMLCollectionOf<HTMLElement>);

    this.performanceTitle =
      (document.getElementsByClassName('table-title') as HTMLCollectionOf<HTMLElement>);

    this.lastPerformanceIndex = this.performanceBlocks.length - 1;

    for (let i = 0; i < this.performanceBlocks.length; i++) {
      this.performanceBlocksWidth += this.performanceBlocks[i].offsetWidth;
    }

    for (let i = 0; i < this.performanceTitle.length; i++) {
      this.performanceTitlesWidth += this.performanceTitle[i].offsetWidth;
    }

  }

  @HostListener('click') onclick() {
    const e = this.performanceBlocks[0];
    const t = this.performanceTitle[0];

    const target = this.element.nativeElement.attributes['data-target'].value;

    if (target === 'next') {

      if (this.performanceIndex === this.lastPerformanceIndex) {
        this.renderer.setStyle(
          e,
          'margin-left',
          0);

        this.renderer.setStyle(
          t,
          'margin-left',
          0);

        this.performanceIndex = 0;
      } else {
        this.performanceIndex++;
        this.renderer.setStyle(
          e,
          'margin-left',
          '-' + e.offsetWidth * this.performanceIndex + 'px');
        this.renderer.setStyle(
          t,
          'margin-left',
          '-' + t.offsetWidth * this.performanceIndex + 'px');
      }

    } else if (target === 'prev') {

      if (this.performanceIndex === 0) {
        this.performanceIndex = this.lastPerformanceIndex;
        this.renderer.setStyle(
          e,
          'margin-left',
          '-' + (this.performanceBlocksWidth - e.offsetWidth) + 'px');
        this.renderer.setStyle(
          t,
          'margin-left',
          '-' + (this.performanceBlocksWidth - t.offsetWidth) + 'px');
      } else {
        console.log(typeof (parseInt(t['style'].marginLeft)))
        this.renderer.setStyle(
          e,
          'margin-left',
          parseInt(e['style'].marginLeft) + e.offsetWidth + 'px');
        this.renderer.setStyle(
          t,
          'margin-left',
          parseInt(t['style'].marginLeft) + e.offsetWidth + 'px');
        this.performanceIndex--;
      }

    }
  }
}