require('scss/magazine/detail.page.scss');

let $ = require('yoho-jquery');
let get = require('lodash/get');
let Swiper = require('yoho-swiper');
let dialog = require('js/plugin/dialog');

new Swiper('.swiper-container', {
    observer: true,
    observeParents: true,
    lazyLoading: true,
    lazyLoadingInPrevNext: true,
    loop: true,
    autoplay: false,
    autoplayDisableOnInteraction: true,
    paginationClickable: true,
    pagination: '.swiper-pagination',
});

function DragableElm(elm) {
    if (!elm || !elm.length || elm._dragable) {
        return;
    }

    elm._dragable = true;

    let _maxY = Math.floor(100 - elm.offset().top);
    let _startY = 0;
    let _moveY = 0;
    let _endY = 0;
    let _open = false;
    let _startTime = 0;

    const moveElm = (y) => {
        _moveY = Math.min(Math.max(y, _maxY), 0);
        elm.css({transform: `translateY(${_moveY}px)`});
    };

    const animationMoveElm = ({from, to, time, startTime}) => {
        window.requestAnimationFrame(t => {
            if (startTime) {
                let y = Math.floor(_endY + (to - from) / time * (t - startTime));

                moveElm(y);

                if (y <= _maxY || y >= 0) {
                    return;
                }
            }

            return animationMoveElm({from, to, time, startTime: startTime || t});
        });
    };

    elm.on('touchstart', e => {
        let point = get(e, 'originalEvent.targetTouches[0]') || {};

        _startY = point.pageY;
        _startTime = new Date();
    }).on('touchmove', e => {
        let point = get(e, 'originalEvent.targetTouches[0]') || {};

        moveElm(point.pageY - _startY + _endY);
    }).on('touchend', e => {
        let time = new Date() - _startTime;
        let movedY = Math.abs(_moveY - _endY);
        let moveOption = {};

        _endY = _moveY;

        if (e.target.className === 'touch-area' || movedY > 150 || movedY / time > 0.5) {
            moveOption = {
                type: 'forward',
                from: _endY,
                to: _open ? 0 : _maxY,
                time: 300
            };
        } else {
            moveOption = {
                type: 'back',
                from: _endY,
                to: _open ? _maxY : 0,
                time: 100
            };
        }

        animationMoveElm(moveOption);
        setTimeout(() => {
            _endY = moveOption.to;

            if (moveOption.type === 'forward') {
                _open = !_open;
            }
        }, moveOption.time);
    });
}

new DragableElm($('.magazine-detail-container'));

$('.to-download').on('click', function() {
    dialog.showDialog({
        dialogText: '请下载有货APP阅读电子刊',
        hasFooter: {
            leftBtnText: '取消',
            rightBtnText: '确定'
        }
    }, function() {
        window.location.href = '//union.yoho.cn/union/app-downloads.html?union_type=100000000000349';
    });
});