export class PullToRefresh
{
	isDragging : boolean = false;
	posStart : number = 0;
	private _dragDistance : number = 0;
	private _threshold: number = 60;
	private _el : HTMLElement;
	private _updateDragPosition : Function;
	private _onRefresh : Function;
	private _isRefreshing : boolean = false;
	constructor(config: { el: HTMLElement, threshold: number, updateDragPosition: (el: HTMLElement, position: number, reset : boolean) => void, onRefresh: () => any }) {
		this._el = config.el;
		this._threshold = config.threshold;
		this._updateDragPosition = config.updateDragPosition;
		this._onRefresh = config.onRefresh;
		this._dragDistance = 0;

		const self = this;
		this._el.addEventListener('touchstart', (e) => self.mouseStart(e));
		this._el.addEventListener('mousedown', (e) => self.mouseStart(e));
		this._el.addEventListener('touchend', () => self.mouseEnd());
		this._el.addEventListener('mouseup', () => self.mouseEnd());
		this._el.addEventListener('touchmove', (e) => self.mouseMove(e));
		this._el.addEventListener('touchmove', (e) => self.mouseMove(e));
	}
	private getPageY(e) {
		if (e.pageY === undefined && e.touches !== undefined) {
			if (e.touches.length <= 0) {
				return false;
			}
			e.pageY = e.touches[e.touches.length - 1].pageY;
		}
		return e.pageY;
	}
	private mouseStart(e: any) {
		if (this._isRefreshing) return;
		this.isDragging = true;
		this.posStart = this.getPageY(e)  + this._el.scrollTop;
	}
	private mouseEnd() {
		if (this._isRefreshing) return;
		if (!this.isDragging) return;

		if (this._dragDistance >= this._threshold) {
			this.isDragging = false;
			this._isRefreshing = true;
			this._onRefresh().finally(() => {
				this._updateDragPosition(this._el, 0, true);
				this._isRefreshing = false;
			})
			return;
		} else {
			this._updateDragPosition(this._el, 0);
		}
		this.isDragging = false;
	}
	private mouseMove(e: any) {
		if (this._isRefreshing) return;
		if (!this.isDragging) return;
		e.pageY = this.getPageY(e);
		if (e.pageY === false) {
			return;
		}
		this._dragDistance = (e.pageY - (this.posStart + this._el.scrollTop));
		if (this._dragDistance <= 0) return;
		this._dragDistance = Math.min(this._dragDistance, this._threshold);
		this._updateDragPosition(this._el, this._dragDistance);
	}
}

new PullToRefresh({
            el: (this.scrollElement as any).element.nativeElement,
            threshold: 90,
            updateDragPosition: (el: HTMLElement, distance: number, reset : boolean) => {
                if (reset) {
                    GsapHelpers.timeLineAnimate([
                        {
                            $e: el,
                            set: { y: 90 },
                            to: { y: distance },
                            duration: 300
                        },
                        {
                            $e: re,
                            set: { y: 90 },
                            to: { y: distance },
                            duration: 300
                        },
                    ]);
                } else {
                    el.style.transform = `translate(0, ${distance}px)`;
                    re.style.transform = `translate(0, ${distance}px)`;
                }

            },
            onRefresh: async () => {
                (re.firstChild as HTMLElement).classList.add('fa-spin');
                await self.loadData(true);
                await Task.delay(100);
                (re.firstChild as HTMLElement).classList.remove('fa-spin');
            }
        });