import {
  AfterViewInit,
  Component,
  DoCheck,
  ElementRef,
  Input,
  KeyValueDiffer,
  KeyValueDiffers, OnDestroy,
  OnInit
} from '@angular/core';
import {AllService} from '../../../all.service';

@Component({
  selector: 'jhi-timeline-mobile',
  templateUrl: './timeline-mobile.component.html',
  styleUrls: ['./timeline-mobile.component.scss']
})
export class TimelineMobileComponent implements OnInit, DoCheck, AfterViewInit, OnDestroy {

  @Input() icons: Array<any> = [];
  @Input() steps: Array<any> = [];
  numItems = 0;
  current = 0;
  currentStep = null;
  indexOfCurrentStep = 0;
  currentLabel = '';
  subscription = null;

  private stepIconsDiffer: KeyValueDiffer<string, any>;


  constructor(public allService: AllService,
              private differs: KeyValueDiffers,
              private elementRef: ElementRef) {
  }

  ngOnInit(): void {
    this.numItems = this.allService.stepIcons.length;
    this.stepIconsDiffer = this.differs.find(this.allService).create();
    this.currentStep = this.steps[0];
    this.currentLabel = this.currentStep.label;
    this.subscription = this.allService.getStepsSubjectAsObserVable().subscribe((data) => {

      if (data.step) {
        this.currentStep = data.step;


        if (data.index >= this.indexOfCurrentStep) {
          this.currentLabel = data.step.label;
          this.findPositionFromTimeline();
          this.next();
        } else {
          if (this.currentLabel !== this.getPrevLabel(data.index)) {
            this.current--;
          }

          if (data.step.hideFromTimeline) {
            this.currentLabel = this.getPrevLabel(data.index);
          } else {
            this.currentLabel = data.step.label;

          }
          this.previous();
        }

        this.indexOfCurrentStep = data.index;
      }
    });

    this.steps.filter((step) => {
      return step.hideFromTimeline;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngAfterViewInit() {
    this.elementRef.nativeElement.querySelector('#slider-container')
      .addEventListener('transitionend', this.rebuildOrder.bind(this));
  }

  ngDoCheck(): void {
    const changes = this.stepIconsDiffer.diff(this.allService);
    if (changes) {
      console.log(changes);
    }
  }

  rebuildOrder(): void {
    this.elementRef.nativeElement.querySelector('#slider-container').classList.remove('slider-container-transition');
  }

  next(): void {
    if (this.current > 1) {
      this.elementRef.nativeElement.querySelector('#slider-container').classList.add('slider-container-transition');
      this.elementRef.nativeElement.querySelector('#slider-container').style.transform = 'translateX(-' + 33.3 * (this.current - 1) + '%)';
    }
  }

  previous(): void {
    this.elementRef.nativeElement.querySelector('#slider-container').classList.add('slider-container-transition');
    this.elementRef.nativeElement.querySelector('#slider-container').style.transform = 'translateX(-' + 33.3 * (this.current - 1) + '%)';
  }

  getPrevLabel(index): string {
    while (index) {
      if (!this.steps[index].hideFromTimeline) {
        return this.steps[index].label;
      }
      index--;
    }
  }

  findPositionFromTimeline(): void {
    let realIndex = 0;
    let i = 0;
    let lastLabelVisible = '';

    while (this.steps[i].productStepId !== this.currentStep.productStepId) {
      if (!this.steps[i].hideFromTimeline) {
        lastLabelVisible = this.steps[i].label;
        realIndex++;
      }
      i++;
    }
    if (this.currentStep.hideFromTimeline) {
      this.currentLabel = lastLabelVisible;
      this.current = realIndex - 1;
    } else {
      this.current = realIndex;
    }
  }

}