import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
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/dots.jsx';
/**
 * dots.jsx
 *
 * @Author: bjzhuwei
 * @Date: 2017/8/18 22:52
 */

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

/**
 * @ignore
 * */

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

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

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

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

            var _props = this.props,
                len = _props.len,
                smallImgList = _props.smallImgList,
                activeIndex = _props.activeIndex,
                imgWidth = _props.imgWidth,
                arrowStyle = _props.arrowStyle,
                smallImgWidth = _props.smallImgWidth,
                handleClick = _props.handleClick,
                display = _props.display,
                other = _objectWithoutProperties(_props, ['len', 'smallImgList', 'activeIndex', 'imgWidth', 'arrowStyle', 'smallImgWidth', 'handleClick', 'display']);

            var smallImgContainerWidth = len * (smallImgWidth + 2 || 60);
            var imgInnerStyle = {};
            if (smallImgContainerWidth > imgWidth) {
                smallImgContainerWidth = imgWidth;
                imgInnerStyle.overflowY = 'scroll';
            }
            imgInnerStyle.width = smallImgContainerWidth + 'px';
            return React.createElement(
                'div',
                { className: 'dots-index-container', style: { width: imgWidth + 'px' }, __source: {
                        fileName: _jsxFileName,
                        lineNumber: 45
                    },
                    __self: this
                },
                len !== 1 && display ? React.createElement(
                    'div',
                    Object.assign({
                        className: classNames('dots', 'inner-bottom'),
                        ref: function ref(e) {
                            return _this2.dots = e;
                        },
                        style: arrowStyle
                    }, other, {
                        __source: {
                            fileName: _jsxFileName,
                            lineNumber: 47
                        },
                        __self: this
                    }),
                    React.createElement(
                        'div',
                        { className: 'inner', __source: {
                                fileName: _jsxFileName,
                                lineNumber: 52
                            },
                            __self: this
                        },
                        React.createElement(
                            'div',
                            { className: 'dots-list', __source: {
                                    fileName: _jsxFileName,
                                    lineNumber: 53
                                },
                                __self: this
                            },
                            smallImgList.map(function (item, index) {
                                var currentIndex = index + 1;
                                var className = activeIndex === currentIndex ? 'on dot-item dot-btn' : 'dot-item dot-btn';
                                return React.createElement('span', {
                                    key: currentIndex,
                                    className: className,
                                    onClick: function onClick() {
                                        return handleClick(currentIndex);
                                    },
                                    __source: {
                                        fileName: _jsxFileName,
                                        lineNumber: 59
                                    },
                                    __self: _this2
                                });
                            })
                        )
                    )
                ) : null
            );
        }
    }]);

    return Dots;
}(React.PureComponent);

Dots.propTypes = {
    type: PropTypes.string,
    len: PropTypes.number,
    imgList: PropTypes.array,
    activeIndex: PropTypes.number,
    handleClick: PropTypes.func,
    isHover: PropTypes.bool
};


export default Dots;