import BScroll from 'better-scroll';

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');

const downloadPage = '//union.yoho.cn/union/app-downloads.html?union_type=100000000000349';

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

document.body.addEventListener('touchmove', function(e) {
    e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});

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;
    let _canDrag = true;

    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});
        });
    };

    let bscroll = new BScroll(elm.find('.detail-container')[0]);

    bscroll.on('scrollEnd', pos => {
        _canDrag = _open ? pos.y > -10 : true;
    });

    elm.on('touchstart', e => {
        if (!_canDrag && open) {
            return;
        }

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

        _startY = point.pageY;
        _startTime = new Date();
    }).on('touchmove', e => {
        if (!_startTime) {
            return;
        }

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

        moveElm(point.pageY - _startY + _endY);
    }).on('touchend', e => {
        if (!_startTime) {
            return;
        }

        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);
        _startTime = 0;
    });
}

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

$('.to-download').on('click', function() {
    dialog.showDialog({
        dialogText: '请在微信搜索并关注“YOHO潮流志”公众号，阅读电子刊',
        hasFooter: {
            centerBtnText: '确定',

            // rightBtnText: '确定'
        }
    }, function() {
        window.location.href = downloadPage;
    });
});

$('.buy-magazine-now').on('click', function() {
    let sku = $(this).data('sku');
    let buy = $(this).data('buy');

    if (sku) {
        window.location.href = buy ? `/cart/magazine/ensure?sku=${sku}` : downloadPage;
    }
});