class SwipeEvents
{
    constructor(element)
    {
        this.xDown = null;
        this.yDown = null;
        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;

        this.element.addEventListener('touchstart', function(event) {
            this.xDown = event.touches[0].clientX;
            this.yDown = event.touches[0].clientY;
        }.bind(this), { passive: true });
    }

    onLeft(callback)
    {
        this.onLeft = callback;
        return this;
    }

    onRight(callback)
    {
        this.onRight = callback;
        return this;
    }

    onUp(callback)
    {
        this.onUp = callback;
        return this;
    }

    onDown(callback)
    {
        this.onDown = callback;
        return this;
    }

    handleTouchMove(event)
    {
        if (!this.xDown || !this.yDown) {
            return;
        }

        let xUp = event.touches[0].clientX;
        let yUp = event.touches[0].clientY;

        this.xDiff = this.xDown - xUp;
        this.yDiff = this.yDown - yUp;

        if (Math.abs(this.xDiff) > Math.abs(this.yDiff)) {
            if (this.xDiff > 0) {
                this.onLeft && this.onLeft();
            } else {
                this.onRight && this.onRight();
            }
        } else {
            if (this.yDiff > 0) {
                this.onUp && this.onUp();
            } else {
                this.onDown && this.onDown();
            }
        }

        this.xDown = null;
        this.yDown = null;
    }

    run()
    {
        this.element.addEventListener('touchmove', (event) => {
            this.handleTouchMove(event);
        }, { passive: true });
    }
}

export default SwipeEvents;