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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { PureComponent, Children, isValidElement, cloneElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import throttle from '../util/throttle';
import ChevronLeft from '../icons/internals/ChevronLeft';
import ChevronRight from '../icons/internals/ChevronRight';
import IconButton from '../button/IconButton';
/**
 * Tabs
 * */

var Tabs =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(Tabs, _PureComponent);

  function Tabs(props, context) {
    var _this;

    _classCallCheck(this, Tabs);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Tabs).call(this, props, context));

    _defineProperty(_assertThisInitialized(_this), "valueToIndex", {});

    _defineProperty(_assertThisInitialized(_this), "scrollLeft", 0);

    _defineProperty(_assertThisInitialized(_this), "init", function () {
      var scrollable = _this.props.scrollable;

      _this.updateInkbar();

      scrollable && _this.scrollToDefaultTab();
      scrollable && _this.updateScrollButtonState();
      window.addEventListener('resize', throttle(function () {
        _this.updateInkbar();

        scrollable && _this.updateScrollButtonState();
      }, 500));
    });

    _defineProperty(_assertThisInitialized(_this), "scrollToDefaultTab", function () {
      var newStyle = _this.getDefaultTabPosition();

      if (newStyle.left != null && (newStyle.left - _this.scrollLeft > _this.scroller.clientWidth - newStyle.width + 10 || newStyle.left - _this.scrollLeft < -10) // 10表示隐藏宽度小于10时不滚动
      ) {
          _this.scrollTo(newStyle.left); // this.forceUpdate();

        }
    });

    _defineProperty(_assertThisInitialized(_this), "updateInkbar", function () {
      var inkbarStyle = _this.state.inkbarStyle;

      var newStyle = _this.getDefaultTabPosition();

      if ((newStyle.left !== inkbarStyle.left || newStyle.width !== inkbarStyle.width) && !Number.isNaN(newStyle.left) && !Number.isNaN(newStyle.width)) {
        _this.setState({
          inkbarStyle: newStyle
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getTabsEl", function (el) {
      _this.tabs = el;
    });

    _defineProperty(_assertThisInitialized(_this), "getScrollerEl", function (el) {
      _this.scroller = el;
    });

    _defineProperty(_assertThisInitialized(_this), "updateScrollButtonState", function () {
      _this.setState({
        disableRightButton: !_this.tabs || !_this.scroller || _this.scrollLeft + _this.scroller.clientWidth >= _this.tabs.clientWidth,
        disableLeftButton: !_this.tabs || !_this.scroller || _this.scrollLeft <= 0
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onLeftScrollClick", function () {
      if (_this.tabs && _this.scroller) {
        var newLeft = _this.scrollLeft - _this.scroller.clientWidth + _this.tabs.children[0].clientWidth;

        _this.scrollTo(newLeft <= 0 ? 0 : newLeft);

        _this.updateScrollButtonState();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onRightScrollClick", function () {
      if (_this.tabs && _this.scroller) {
        var newLeft = _this.scrollLeft + _this.scroller.clientWidth - _this.tabs.children[0].clientWidth;

        _this.scrollTo(newLeft >= _this.tabs.clientWidth ? _this.tabs.clientWidth : newLeft);

        _this.updateScrollButtonState();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {// console.log(e.touches[0]);
    });

    _defineProperty(_assertThisInitialized(_this), "onSelect", function (e, tabValue) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          onSelect = _this$props.onSelect,
          scrollable = _this$props.scrollable,
          value = _this$props.value;
      var selectedValue = _this.state.selectedValue;

      if (!_this.isControlled) {
        _this.setState({
          selectedValue: tabValue
        }, function () {
          if (scrollable) {
            _this.scrollToDefaultTab();

            _this.updateScrollButtonState();
          }
        });
      }

      if (onChange && (_this.isControlled ? value : selectedValue) !== tabValue) {
        onChange(e, tabValue);
      }

      if (onSelect) {
        onSelect(e, tabValue);
      }
    });

    _this.isControlled = props.value != null;
    _this.state = Object.assign({
      inkbarStyle: {},
      disableLeftButton: false,
      disableRightButton: false
    }, _this.isControlled ? {} : {
      selectedValue: props.defaultValue
    });
    _this.tabItems = {};
    return _this;
  }

  _createClass(Tabs, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.init();
      setTimeout(this.init, 300);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(newProps) {
      if (!this.isControlled && newProps.defaultValue !== this.props.defaultValue) {
        this.setState({
          selectedValue: newProps.defaultValue
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.updateInkbar();
    }
  }, {
    key: "getTabs",
    value: function getTabs() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
      var tabs = [];
      Children.forEach(props.children, function (tab) {
        if (isValidElement(tab)) {
          tabs.push(tab);
        }
      });
      return tabs;
    }
  }, {
    key: "getDefaultTabPosition",
    value: function getDefaultTabPosition() {
      var value = this.props.value;
      var selectedValue = this.state.selectedValue;
      var targetIndex = this.valueToIndex[this.isControlled ? value : selectedValue];
      var newStyle = {};

      if (this.tabs && targetIndex != null) {
        var target = this.tabs.children[targetIndex];

        if (target) {
          newStyle.left = (target.getBoundingClientRect().left || 0) - (this.tabs.getBoundingClientRect().left || 0);
          newStyle.width = target.getBoundingClientRect().width;
        }
      }

      return newStyle;
    }
  }, {
    key: "scrollTo",
    value: function scrollTo(distance) {
      if (this.tabs) {
        this.scrollLeft = distance;
        this.tabs.style.transform = "translateX(".concat(-this.scrollLeft, "px)");
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          children = _this$props2.children,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          showInkbar = _this$props2.showInkbar,
          fullWidth = _this$props2.fullWidth,
          scrollable = _this$props2.scrollable,
          defaultValue = _this$props2.defaultValue,
          size = _this$props2.size,
          propsValue = _this$props2.value,
          other = _objectWithoutProperties(_this$props2, ["children", "prefixCls", "className", "showInkbar", "fullWidth", "scrollable", "defaultValue", "size", "value"]);

      var _this$state = this.state,
          selectedValue = _this$state.selectedValue,
          disableLeftButton = _this$state.disableLeftButton,
          disableRightButton = _this$state.disableRightButton,
          inkbarStyle = _this$state.inkbarStyle;
      var value = this.isControlled ? propsValue : selectedValue;
      var classes = classNames(prefixCls);
      var tabs = this.getTabs().map(function (tab, key) {
        _this2.valueToIndex[tab.props.value != null ? tab.props.value : key] = key;
        return cloneElement(tab, {
          fullWidth: fullWidth,
          index: key,
          size: size,
          key: tab.props.value || key,
          selected: tab.props.value === value || tab.props.value == null && key === value,
          onSelect: _this2.onSelect
        });
      });
      return React.createElement("div", _extends({}, other, {
        className: classNames("".concat(prefixCls, "-container"), className, "".concat(prefixCls, "-").concat(size))
      }), scrollable ? React.createElement(IconButton, {
        variant: "text",
        className: "".concat(prefixCls, "-scroll-button"),
        onClick: this.onLeftScrollClick,
        disabled: disableLeftButton
      }, React.createElement(ChevronLeft, {
        className: "".concat(prefixCls, "-scroll-button-icon")
      })) : null, React.createElement("div", {
        className: "".concat(prefixCls, "-scroller"),
        ref: this.getScrollerEl
      }, React.createElement("div", {
        className: classes,
        role: "tablist",
        ref: this.getTabsEl,
        style: {
          transform: "translateX(".concat(-this.scrollLeft, "px)")
        }
      }, tabs, showInkbar ? React.createElement("div", {
        className: "".concat(prefixCls, "-inkbar"),
        style: inkbarStyle
      }) : null)), scrollable ? React.createElement(IconButton, {
        variant: "text",
        className: "".concat(prefixCls, "-scroll-button"),
        onClick: this.onRightScrollClick,
        disabled: disableRightButton
      }, React.createElement(ChevronRight, {
        className: "".concat(prefixCls, "-scroll-button-icon")
      })) : null);
    }
  }]);

  return Tabs;
}(PureComponent);

_defineProperty(Tabs, "propTypes", {
  prefixCls: PropTypes.string,
  className: PropTypes.string,

  /** 是否显示墨水条 */
  showInkbar: PropTypes.bool,

  /** 是否占满全宽 */
  fullWidth: PropTypes.bool,

  /** 是否可以滚动 */
  scrollable: PropTypes.bool,

  /** 默认值 */
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),

  /** tab切换回调 function(e, value) */
  onChange: PropTypes.func,

  /** tab点击回调 function(e, value) */
  onSelect: PropTypes.func,

  /** 尺寸 */
  size: PropTypes.oneOf(['large', 'medium', 'small'])
});

_defineProperty(Tabs, "defaultProps", {
  defaultValue: 0,
  prefixCls: 'ne-tabs',
  showInkbar: true,
  fullWidth: false,
  scrollable: false,
  size: 'medium'
});

export default Tabs;