import {
  Component, AfterContentInit, Renderer2, ViewChild, Input, ViewChildren, QueryList,
  AfterViewInit, ElementRef
} from '@angular/core';

import {Content, Platform, SegmentButton, Slides} from "ionic-angular";
import {timeout} from "rxjs/operator/timeout";

@Component({
  selector: 'ion-segment-slider',
  templateUrl: 'ion-segment-slider.html',
  providers: [Slides]

})
export class IonSegmentSliderComponent implements AfterContentInit ,AfterViewInit{
  @ViewChild('SwipedTabsIndicator') SwipedTabsIndicator;
  @Input("SliderReference") SwipedTabsSlider: Slides;
  @Input("tabsTitleArray") tabs: String[] = [];
  @Input("isScrolledTabs") isScrolledTabs: boolean = true;

  @ViewChild('MultiItemsScrollingTabs') ItemsTitles: Content;
  @ViewChildren('TabsSegments',{read: ElementRef}) TabsSegments: QueryList<ElementRef>;
  tabTitleWidthArray: any = [];
  screenWidth_px: number = 0;
  isRight: boolean = true;
  isLeft: boolean = true;

  constructor(private  renderer: Renderer2, platform: Platform) {
    this.screenWidth_px = platform.width();
  }


  ngAfterContentInit() {
    var keys = Object.keys(this.tabs);
    var len = keys.length;
    if (len === 0) {
      const slides = this.SwipedTabsSlider.getElementRef().nativeElement.querySelectorAll('ion-slide');
      for (var slide of slides) {
        this.tabs.push(slide.getAttribute("title"));
      }
    }




    this.SwipedTabsSlider.ionSlideDrag.subscribe(($event) => {
      this.animateIndicator($event);
    });

    this.SwipedTabsSlider.ionSlideDidChange.subscribe(() => {
      this.updateIndicatorPosition();
    });

    if (this.isScrolledTabs) {
      this.renderer.listen(this.SwipedTabsSlider.getNativeElement(), 'panend', (event) => {
        this.updateIndicatorPositionOnTouchEnd();
      });
      this.SwipedTabsSlider.ionSlideWillChange.subscribe(() => {
        this.scrollIndicatiorTab();
      });

    }
    else
    {
      this.renderer.listen(this.SwipedTabsSlider.getNativeElement(), 'pan', (event) => {
        this.updateIndicatorPosition();
      });



      this.SwipedTabsSlider.ionSlideWillChange.subscribe(() => {
        this.updateIndicatorPosition();
      });
    }


  }

  ngAfterViewInit()
  {
    if (this.isScrolledTabs) {
        this.TabsSegments.forEach((Segment) => {
          Segment.nativeElement.style.cssText='width:'+Segment.nativeElement.offsetWidth+'px !important';
          this.tabTitleWidthArray.push(Segment.nativeElement.offsetWidth);
        });

      this.SwipedTabsIndicator.nativeElement.style.width = this.tabTitleWidthArray[0] + "px";

    }
  }

  selectTab(index) {

    if (this.isScrolledTabs) {
      this.SwipedTabsIndicator.nativeElement.style.width = this.tabTitleWidthArray[index] + "px";
      this.SwipedTabsIndicator.nativeElement.style.webkitTransform = 'translate3d(' + (this.calculateDistanceToSpnd(index)) + 'px,0,0)';
    }
    else {
      this.SwipedTabsIndicator.nativeElement.style.webkitTransform = 'translate3d(' + (100 * index) + '%,0,0)';
      //  this.SwipedTabsIndicator.nativeElement.style.transform = 'translate3d('+(100*index)+'%,0,0)';
    }

    this.SwipedTabsSlider.slideTo(index, 500);
  }

  updateIndicatorPosition() {
    var index = this.SwipedTabsSlider.getActiveIndex();

    // this condition is to avoid passing to incorrect index
    if (this.SwipedTabsSlider.length() > index) {
      if (this.isScrolledTabs) {

        if (this.SwipedTabsSlider.length() == index)
          index = index - 1;

        this.SwipedTabsIndicator.nativeElement.style.width = this.tabTitleWidthArray[index] + "px";
        this.SwipedTabsIndicator.nativeElement.style.webkitTransform = 'translate3d(' + (this.calculateDistanceToSpnd(index)) + 'px,0,0)';
      }
      else {
        this.SwipedTabsIndicator.nativeElement.style.transform = 'translate3d(' + (index * 100) + '%,0,0)';
        //this.SwipedTabsIndicator.nativeElement.style.webkitTransform = 'translate3d('+(index * 100)+'%,0,0)';


      }
    }

  }

  animateIndicator($event) {
    if (this.isScrolledTabs)
      {
        this.isLeft = false;
        this.isRight = false;
        var currentSliderCenterProgress = (1 / (this.SwipedTabsSlider.length() - 1)) * this.SwipedTabsSlider.getActiveIndex();
        if ($event.progress < currentSliderCenterProgress) {
          this.isLeft = true;
          this.isRight = false;

        }
        if ($event.progress > currentSliderCenterProgress) {
          this.isLeft = false;
          this.isRight = true;
        }

        if (this.SwipedTabsSlider.isEnd())
          this.isRight = false;

        if (this.SwipedTabsSlider.isBeginning())
          this.isLeft = false;

        if (this.isRight)
          this.SwipedTabsIndicator.nativeElement.style.webkitTransform =
            'translate3d(' + (this.calculateDistanceToSpnd(this.SwipedTabsSlider.getActiveIndex())
            + ($event.progress - currentSliderCenterProgress) * (this.SwipedTabsSlider.length() - 1) * this.tabTitleWidthArray[this.SwipedTabsSlider.getActiveIndex() + 1])
            + 'px,0,0)';

        if (this.isLeft)
          this.SwipedTabsIndicator.nativeElement.style.webkitTransform =
            'translate3d(' + (this.calculateDistanceToSpnd(this.SwipedTabsSlider.getActiveIndex())
            + ($event.progress - currentSliderCenterProgress) * (this.SwipedTabsSlider.length() - 1) * this.tabTitleWidthArray[this.SwipedTabsSlider.getActiveIndex() - 1])
            + 'px,0,0)';

        if (!this.isRight && !this.isLeft)
          this.SwipedTabsIndicator.nativeElement.style.width = this.tabTitleWidthArray[this.SwipedTabsSlider.getActiveIndex()] + "px";

      } else
      {

      this.SwipedTabsIndicator.nativeElement.style.webkitTransform = 'translate3d(' + (($event.progress * (this.SwipedTabsSlider.length() - 1)) * 100) + '%,0,0)';
      //  this.SwipedTabsIndicator.nativeElement.style.transform = 'translate3d(' + (($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)';

    }
  }


  scrollIndicatiorTab() {
    this.ItemsTitles.scrollTo(this.calculateDistanceToSpnd(this.SwipedTabsSlider.getActiveIndex()) - this.screenWidth_px / 2, 0);
  }


  calculateDistanceToSpnd(index) {
    var result = 0;
    for (var _i = 0; _i < index; _i++) {
      result = result + this.tabTitleWidthArray[_i];
    }

    return result;
  }

  updateIndicatorPositionOnTouchEnd() {
    setTimeout(() => {
      this.updateIndicatorPosition();
    }, 200);
  }

}