import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import './index.less';
import { Icon } from '@whalecloud/fdx';
var SRC_TYPE;
(function (SRC_TYPE) {
    SRC_TYPE["IMG"] = "IMG";
    SRC_TYPE["VIDEO"] = "VIDEO";
})(SRC_TYPE || (SRC_TYPE = {}));

var SkuImgSlider = function (_Component) {
    _inherits(SkuImgSlider, _Component);

    function SkuImgSlider(props) {
        _classCallCheck(this, SkuImgSlider);

        var _this = _possibleConstructorReturn(this, (SkuImgSlider.__proto__ || Object.getPrototypeOf(SkuImgSlider)).call(this, props));

        _this.getSlider = function () {
            var imgIndex = _this.state.imgIndex;
            var _this$props = _this.props,
                dataSource = _this$props.dataSource,
                rowKey = _this$props.rowKey,
                smallImgField = _this$props.smallImgField,
                middleImgField = _this$props.middleImgField,
                nodePadding = _this$props.nodePadding;

            var imgLen = _this.slidNodeWidth - nodePadding + 'px';
            return dataSource.map(function (source, index) {
                var _this2 = this;

                return React.createElement(
                    'div',
                    { key: source[rowKey], className: index === imgIndex ? 'sliderNode active' : 'sliderNode', style: { marginRight: nodePadding + 'px' }, onMouseOver: function onMouseOver() {
                            _this2.onImgIndexChange(index, source);
                        } },
                    React.createElement('img', { src: source[smallImgField] || source[middleImgField], style: { width: imgLen, height: imgLen } })
                );
            }.bind(_this));
        };
        _this.onImgIndexChange = function (index, source) {
            var onChangeSku = _this.props.onChangeSku;

            _this.setState({
                imgIndex: index
            });
            onChangeSku && onChangeSku(source);
        };
        _this.onPreBtnClick = function () {
            var cursor = _this.state.cursor;

            if (cursor === 0) {
                return;
            }
            _this.setState(function (nextState) {
                return { cursor: nextState.cursor - 1 };
            });
        };
        _this.onNextBtnClick = function () {
            var cursor = _this.state.cursor;

            if (cursor === _this.maxSlideNum) {
                return;
            }
            _this.setState(function (nextState) {
                return { cursor: nextState.cursor + 1 };
            });
        };
        _this.calculationBlock = function (offsetX, offsetY) {
            var _this$state = _this.state,
                mouseBlock = _this$state.mouseBlock,
                magnifierImg = _this$state.magnifierImg;
            var _this$props2 = _this.props,
                multiple = _this$props2.multiple,
                width = _this$props2.width;

            var halfMouseBlock = width / (multiple * 2);
            var maxOffset = width - halfMouseBlock;
            offsetX = offsetX < halfMouseBlock ? halfMouseBlock : offsetX;
            offsetX = offsetX > maxOffset ? maxOffset : offsetX;
            offsetY = offsetY < halfMouseBlock ? halfMouseBlock : offsetY;
            offsetY = offsetY > maxOffset ? maxOffset : offsetY;
            _this.setState({
                mouseBlock: _extends(_extends({}, mouseBlock), { left: offsetX - halfMouseBlock + 'px', top: offsetY - halfMouseBlock + 'px' }),
                magnifierImg: _extends(_extends({}, magnifierImg), { left: (halfMouseBlock - offsetX) * multiple + 'px', top: (halfMouseBlock - offsetY) * multiple + 'px' })
            });
        };
        _this.onMouseEnter = function () {
            var needMagnifier = _this.props.needMagnifier;

            _this.setState({
                magnifierOff: needMagnifier ? false : true
            });
        };
        _this.onMouseLeave = function () {
            _this.setState({
                magnifierOff: true
            });
        };
        _this.onMouseMove = function (event) {
            var e = event.nativeEvent;
            _this.calculationBlock(e.offsetX, e.offsetY);
        };
        _this.pageBtnWidth = props.dataSource.length > props.slideNum ? props.width / props.slideNum / 2 : 0;
        _this.slidNodeWidth = (props.width - _this.pageBtnWidth * 2) / (props.slideNum - 1);
        _this.maxSlideNum = props.dataSource.length - props.slideNum + 1;
        _this.videoOpt = {
            controls: true,
            muted: true,
            autoPlay: true,
            disablePictureInPicture: true,
            controlsList: "nodownload nofullscreen noremoteplayback"
        };
        _this.state = {
            imgIndex: 0,
            cursor: 0,
            imgViewVisible: false,
            magnifierOff: true,
            marginTop: (_this.slidNodeWidth - props.nodePadding) / 3,
            mouseBlock: {
                position: 'absolute',
                width: props.width / props.multiple + 'px',
                height: props.width / props.multiple + 'px',
                background: 'rgba(0,0,0,0.1)',
                zIndex: 99
            },
            magnifierImg: {
                position: 'absolute',
                transform: 'scale(' + props.multiple + ')',
                transformOrigin: 'top left'
            }
        };
        return _this;
    }

    _createClass(SkuImgSlider, [{
        key: 'render',
        value: function render() {
            var _props = this.props,
                dataSource = _props.dataSource,
                middleImgField = _props.middleImgField,
                largeImgField = _props.largeImgField,
                videoField = _props.videoField,
                needMagnifier = _props.needMagnifier,
                width = _props.width,
                slideNum = _props.slideNum,
                _onClick = _props.onClick,
                needBorder = _props.needBorder;
            var _state = this.state,
                imgIndex = _state.imgIndex,
                cursor = _state.cursor,
                magnifierOff = _state.magnifierOff,
                mouseBlock = _state.mouseBlock,
                magnifierImg = _state.magnifierImg,
                marginTop = _state.marginTop;

            if (!dataSource[imgIndex]) {
                return React.createElement(React.Fragment, null);
            }
            var mUrl = dataSource[imgIndex][middleImgField];
            var lUrl = dataSource[imgIndex][largeImgField];
            var videoUrl = dataSource[imgIndex][videoField];
            var type = dataSource[imgIndex].type;
            var wrapLen = width + 'px';
            var sliderWrap = width + 'px';
            return React.createElement(
                'div',
                { className: 'sku-img-slider container' },
                React.createElement(
                    'div',
                    { className: 'sisTop', style: { height: wrapLen, width: wrapLen, border: needBorder ? '1px solid #d9d9d9' : 'none' } },
                    React.createElement('img', { src: mUrl, style: { display: type === SRC_TYPE.IMG ? '' : 'none' } }),
                    React.createElement(
                        'video',
                        _extends({ className: 'sisSkuVideo', style: { display: type === SRC_TYPE.VIDEO ? '' : 'none' } }, this.videoOpt),
                        React.createElement('source', { src: videoUrl, type: 'video/mp4' })
                    ),
                    needMagnifier && magnifierOff && type === SRC_TYPE.IMG && React.createElement(Icon, { type: 'search', className: 'sisMagnifierIcon' }),
                    type === SRC_TYPE.IMG && React.createElement('div', { className: 'maskBlock', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onMouseMove: this.onMouseMove, onClick: function onClick() {
                            _onClick && _onClick(dataSource[imgIndex]);
                        } }),
                    !magnifierOff && type === SRC_TYPE.IMG && React.createElement(
                        'div',
                        null,
                        React.createElement('div', { style: mouseBlock }),
                        React.createElement(
                            'div',
                            { className: 'magnifierContainer', style: { left: wrapLen, width: wrapLen, height: wrapLen } },
                            React.createElement('img', { style: magnifierImg, src: lUrl, alt: '' })
                        )
                    )
                ),
                React.createElement(
                    'div',
                    { className: 'sisBottom', style: { width: wrapLen, padding: '0 ' + (this.pageBtnWidth - 4) + 'px', marginTop: marginTop + 'px' } },
                    slideNum < dataSource.length && React.createElement(Icon, { type: 'left', className: 'sisPreBtn', style: {
                            fontSize: this.pageBtnWidth + 'px',
                            padding: '3px',
                            color: cursor === 0 ? '#CBCBCB' : '#000'
                        }, onClick: this.onPreBtnClick }),
                    React.createElement(
                        'div',
                        { className: 'sisSliderWrap', style: { width: sliderWrap } },
                        React.createElement(
                            'div',
                            { className: 'sisSlider', style: {
                                    width: this.slidNodeWidth * (dataSource.length + 1) + 'px',
                                    transform: 'translatex(-' + cursor * this.slidNodeWidth + 'px)'
                                } },
                            this.getSlider()
                        )
                    ),
                    slideNum < dataSource.length && React.createElement(Icon, { type: 'right', className: 'sisNextBtn', style: {
                            fontSize: this.pageBtnWidth + 'px',
                            padding: '2px',
                            color: cursor === this.maxSlideNum ? '#CBCBCB' : '#000'
                        }, onClick: this.onNextBtnClick })
                )
            );
        }
    }]);

    return SkuImgSlider;
}(Component);

SkuImgSlider.defaultProps = {
    multiple: 2,
    dataSource: [],
    rowKey: 'id',
    smallImgField: 'sUrl',
    middleImgField: 'mUrl',
    largeImgField: 'lUrl',
    videoField: 'videoUrl',
    needMagnifier: true,
    width: 512,
    slideNum: 6,
    nodePadding: 10,
    sliderMarginTop: 24,
    needBorder: true
};
export default SkuImgSlider;