import utils from 'utils';
function Mwipe (el, direction) {

console.log(direction);
this.el = el;
this.speed = 300;
this.direction = direction;
this.startHandle = this.touchStart.bind(this);
this.moveHandle = this.touchMove.bind(this);
this.endHandle = this.touchEnd.bind(this);
this.initEvent();

}

Mwipe.prototype = {

initEvent: function () {
    /*this.el.addEventListener("touchstart", this.touchStart.bind(this));
    this.el.addEventListener("touchmove", this.touchMove.bind(this));
    this.el.addEventListener("touchend", this.touchEnd.bind(this));*/
    this.el.addEventListener("touchstart", this.startHandle);
    this.el.addEventListener("touchmove", this.moveHandle);
    this.el.addEventListener("touchend", this.endHandle);

},
touchStart: function (e) {
    let touches = e.touches[0];
    this.startStatus = {
        x: touches.pageX,
        y: touches.pageY,
        time: Date.now()
    };
    this.validSlide = false;
},
touchMove: function (e) {
    let touches = e.touches[0];
    e.preventDefault();

    this.endStatus = {
        x: touches.pageX,
        y: touches.pageY,
        time: Date.now()
    };
    this.delta = {
        x: this.endStatus.x - this.startStatus.x,
        y: this.endStatus.y - this.startStatus.y,
        time: this.endStatus.time - this.startStatus.time
    };

    if(this.direction === 'horizontal') {
        this.translate(`${this.delta.x}px`, 0);
    } else {
        this.translate(`${this.delta.y}px`, 0);
    }

    this.validSlide = true;
},
touchEnd: function (e) {
    if (this.validSlide) {
        if(this.direction === 'horizontal') {
            let deltaX = Math.abs(this.delta.x),
                dir = this.delta.x / deltaX,
                con = (deltaX > window.innerWidth / 3 || this.delta.time < 250 && deltaX > 20)
                    && ((this.delta.x > 0 && this.el.querySelector('.prev')) || (this.delta.x < 0 && this.el.querySelector('.next')));
            if (con) {
                this.translate(`${dir * window.innerWidth}px`, this.speed);

                setTimeout(() => {
                    utils.trigger('slide', [dir]);
                }, this.speed);
            } else {
                this.translate('0px', this.speed);
            }
        } else {
            let deltaY = Math.abs(this.delta.y),
                dir = this.delta.y / deltaY,
                con = (deltaY > window.innerHeight / 6 || this.delta.time < 250 && deltaY > 20)
                    && ((this.delta.y > 0 && this.el.querySelector('.prev')) || (this.delta.y < 0 && this.el.querySelector('.next')));

            if (con) {
                this.translate(`${dir * window.innerHeight}px`, this.speed);

                setTimeout(() => {
                    utils.trigger('slide', [dir]);
                }, this.speed);
            } else {
                this.translate('0px', this.speed);
            }
        }
    }
},
translate: function (dist, speed) {
    this.el.style.webkitTransitionDuration = `${speed}ms`;

    if(this.direction === 'horizontal') {
        this.el.style.webkitTransform = `translate3d(${dist}, 0, 0)`;
    } else {
        this.el.style.webkitTransform = `translate3d(0, ${dist}, 0)`;
    }
},
removeEvent: function () {
    this.el.removeEventListener('touchstart', this.startHandle);
    this.el.removeEventListener('touchmove', this.moveHandle);
    this.el.removeEventListener('touchend', this.endHandle);
}

};

module.exports = Mwipe;