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';
var _jsxFileName = 'src/carousel/SmallImgIndex.jsx';
/**
 * dots.jsx
 *
 * @Author: bjzhuwei
 * @Date: 2017/8/18 22:52
 */

import React from 'react';
import PropTypes from 'prop-types';

/**
 * @ignore
 * */

var SmallImgIndex = function (_React$PureComponent) {
    _inherits(SmallImgIndex, _React$PureComponent);

    function SmallImgIndex() {
        _classCallCheck(this, SmallImgIndex);

        return _possibleConstructorReturn(this, (SmallImgIndex.__proto__ || Object.getPrototypeOf(SmallImgIndex)).apply(this, arguments));
    }

    _createClass(SmallImgIndex, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                len = _props.len,
                smallImgList = _props.smallImgList,
                activeIndex = _props.activeIndex,
                imgWidth = _props.imgWidth,
                smallImgWidth = _props.smallImgWidth,
                imgGap = _props.imgGap,
                handleClick = _props.handleClick,
                display = _props.display,
                left = _props.left;

            var smallImgContainerWidth = len * smallImgWidth + imgGap * (len - 1);
            var imgInnerStyle = {
                width: smallImgContainerWidth + 'px',
                transform: 'translateX(' + left + 'px)',
                boxSizing: 'content-box'
            };

            return React.createElement(
                'div',
                { className: 'img-index-container', style: { width: imgWidth + 'px' }, ref: function ref(e) {
                        return _this2.dots = e;
                    }, __source: {
                        fileName: _jsxFileName,
                        lineNumber: 57
                    },
                    __self: this
                },
                len !== 1 && display ? React.createElement(
                    'div',
                    { className: 'smallImg', style: imgInnerStyle, __source: {
                            fileName: _jsxFileName,
                            lineNumber: 59
                        },
                        __self: this
                    },
                    smallImgList.map(function (item, index) {
                        var currentIndex = index + 1;
                        var className = activeIndex === currentIndex ? 'smallImg-item smallImg-on' : 'smallImg-item';
                        var styleContainer = {
                            width: smallImgWidth + 'px',
                            height: smallImgWidth + 'px',
                            background: 'url(' + item.img + ') no-repeat center',
                            backgroundSize: 'cover'
                        };
                        return React.createElement('div', {
                            className: className,
                            style: styleContainer,
                            key: currentIndex,
                            onClick: function onClick() {
                                return handleClick(currentIndex);
                            },
                            __source: {
                                fileName: _jsxFileName,
                                lineNumber: 71
                            },
                            __self: _this2
                        });
                    })
                ) : null
            );
        }
    }]);

    return SmallImgIndex;
}(React.PureComponent);

SmallImgIndex.propTypes = {
    type: PropTypes.string,
    len: PropTypes.number,
    imgList: PropTypes.array,
    activeIndex: PropTypes.number,
    smallImgWidth: PropTypes.number,
    smallImgHeight: PropTypes.number,
    handleClick: PropTypes.func,
    isHover: PropTypes.bool,
    imgGap: PropTypes.number
};
SmallImgIndex.defaultProps = {
    imgList: [],
    activeIndex: 1,
    smallImgWidth: 64,
    smallImgHeight: 64,
    imgGap: 8,
    handleClick: function handleClick(rs) {
        return console.log(rs);
    },
    isHover: false
};

export default SmallImgIndex;