import { Component, OnInit, OnDestroy, HostListener, Input, EventEmitter, Output } from '@angular/core';
import { TranslatorService } from '../../services/translator/translator.service';
import { CommonService } from '../../services/common/common.service';

@Component({
  selector: 'refresher',
  templateUrl: './refresher.component.html',
  styleUrls: ['./refresher.component.scss'],
})
export class RefresherComponent implements OnInit, OnDestroy {

  private mouseMove = 'mousemove';
  private touchMove = 'touchmove';

  /*
  area which you can drag 0.2 from screen height
  */
  @Input() maxSlidingHeightRatio = 0.15;
  private maxSlidingHeight = 200;
  /*
  top area form screen where you can start drag
  */
  @Input() maxStargDragRatio = 0.1;
  private startDragAreaHeight = 200;

  private startX = 0;
  private startY = 0;

  private height = 0;
  private isDown = false;

  @Output() refresh = new EventEmitter();

  constructor(
    public ts: TranslatorService,
    public cs: CommonService
  ) {

    // this.initialize(this.getScreenHeight());
  }

  ngOnInit() {
  }

  private initialize(screenHeight: number) {
    this.startDragAreaHeight = screenHeight * this.maxStargDragRatio;
    this.maxSlidingHeight = screenHeight * this.maxSlidingHeightRatio;
  }

  /* click events*/
  @HostListener('document:mousedown', ['$event'])
  @HostListener('document:touchstart', ['$event'])
  onTouchDown(e) {
    // this.processDownEvent(e.pageX || e.touches[0].pageX, e.pageY || e.touches[0].pageY);
  }

  @HostListener('document:mouseup', ['$event'])
  @HostListener('document:touchend', ['$event'])
  @HostListener('document:touchcancel', ['$event'])
  onTouchUp(e) {
    // this.processOnTouchEnd();
  }

  /* move events */
  @HostListener('document:mousemove', ['$event'])
  @HostListener('document:touchmove', ['$event'])
  onTouchMove(e) {
    // this.processMoveEvent(e.pageX || e.touches[0].pageX, e.pageY || e.touches[0].pageY);
  }

  /*
  screen resize
  */
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    // this.initialize(event.target.innerHeight);
  }


  private processOnTouchEnd() {
    // if dragged more than 80% from the maxh drag height
    if (  (this.height / this.maxSlidingHeight) >= 0.8 )  {
      this.triggerRefresh();
    }
    this.height = 0;
    this.isDown = false;
  }

  private triggerRefresh( ) {
// to be compatible with ion-refresher
    this.refresh.emit( {
      target: {
        complete : () => {}
      }
    });
  }

  public triggerIonRefresh(event) {
    // to be compatible with ion-refresher
        this.refresh.emit(event);
      }
  /*
  check if you start dragging from the top of the page
  */
  private inStartDragArea(y: number): boolean {
    return y <= this.startDragAreaHeight;
  }

  private processMoveEvent(x: number, y: number) {
    if (this.isDown) {
      let yDiff = (y - this.startY);
      const slidingFactor = (y - this.startY) / this.maxSlidingHeight;
      yDiff = Math.max(0, yDiff);
      this.height = Math.min(yDiff, this.maxSlidingHeight);
    }
  }

  private processDownEvent(x: number, y: number) {
    if (this.inStartDragArea(y)) {
      this.isDown = true;
      this.height = 0;
      this.startX = x;
      this.startY = y;
    }
  }

  private getScreenWidth = function () {
    return window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

  }

  private getScreenHeight() {
    return window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;

  }

  ngOnDestroy(): void {
  }



}
