import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/**
 * 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 =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Dots, _React$PureComponent);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(Dots).apply(this, arguments));
  }

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

      var _this$props = this.props,
          len = _this$props.len,
          smallImgList = _this$props.smallImgList,
          activeIndex = _this$props.activeIndex,
          imgWidth = _this$props.imgWidth,
          arrowStyle = _this$props.arrowStyle,
          smallImgWidth = _this$props.smallImgWidth,
          handleClick = _this$props.handleClick,
          display = _this$props.display,
          other = _objectWithoutProperties(_this$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 = "".concat(smallImgContainerWidth, "px");
      return React.createElement("div", {
        className: "dots-index-container",
        style: {
          width: "".concat(imgWidth, "px")
        }
      }, len !== 1 && display ? React.createElement("div", _extends({
        className: classNames('dots', 'inner-bottom'),
        ref: function ref(e) {
          return _this.dots = e;
        },
        style: arrowStyle
      }, other), React.createElement("div", {
        className: "inner"
      }, React.createElement("div", {
        className: "dots-list"
      }, 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);
          }
        });
      })))) : null);
    }
  }]);

  return Dots;
}(React.PureComponent);

_defineProperty(Dots, "propTypes", {
  type: PropTypes.string,
  len: PropTypes.number,
  imgList: PropTypes.array,
  activeIndex: PropTypes.number,
  handleClick: PropTypes.func,
  hover: PropTypes.bool
});

export default Dots;