var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { forwardRef } from 'react';

var Tabbar = forwardRef(function (_ref, ref) {
  var style = _ref.style,
      _ref$className = _ref.className,
      className = _ref$className === undefined ? 'tabbar-line tabbar-line-width70 border-b' : _ref$className,
      _ref$contentAttribute = _ref.contentAttribute,
      contentAttribute = _ref$contentAttribute === undefined ? {} : _ref$contentAttribute,
      _ref$captionAttribute = _ref.captionAttribute,
      captionAttribute = _ref$captionAttribute === undefined ? {} : _ref$captionAttribute,
      _ref$sndcaptionAttrib = _ref.sndcaptionAttribute,
      sndcaptionAttribute = _ref$sndcaptionAttrib === undefined ? {} : _ref$sndcaptionAttrib,
      _ref$list = _ref.list,
      list = _ref$list === undefined ? [] : _ref$list,
      tiled = _ref.tiled,
      disabled = _ref.disabled,
      _ref$exceptOnClickAct = _ref.exceptOnClickActive,
      exceptOnClickActive = _ref$exceptOnClickAct === undefined ? true : _ref$exceptOnClickAct,
      onClick = _ref.onClick,
      _ref$activeIndex = _ref.activeIndex,
      activeIndex = _ref$activeIndex === undefined ? 0 : _ref$activeIndex,
      others = _objectWithoutProperties(_ref, ['style', 'className', 'contentAttribute', 'captionAttribute', 'sndcaptionAttribute', 'list', 'tiled', 'disabled', 'exceptOnClickActive', 'onClick', 'activeIndex']);

  function click(e) {
    var target = e.target;
    if (exceptOnClickActive && target.classList.contains('active')) return;
    var index = target.getAttribute('data-index');
    if (!index) return;
    if (onClick) {
      onClick(e, list[index], Number(index));
      e.stopPropagation();
    }
  }
  function getTabbarStyle() {
    var tabbarStyle = {};
    // 矩形tabbar应当有的总宽度
    if (className.hasClass('tabbar-rect')) {
      switch (list.length) {
        case 1:
          tabbarStyle = { width: '30%' };
          break;
        case 2:
          tabbarStyle = { width: '50%' };
          break;
        case 3:
          tabbarStyle = { width: '50%' };
          break;
        default:
          tabbarStyle = {};
      }
    }
    return Object.assign({}, tabbarStyle, style);
  }
  function getTabbarClassName() {
    return 'tabbar animated' + (className ? ' ' + className : ' tabbar-line-width60') + (tiled ? ' tabbar-tiled' : '');
  }
  function getIconDOM(icon, iconActive, isActive) {
    if (isActive) {
      return iconActive ? iconActive : icon;
    }
    return icon;
  }
  function getTabsDOM() {
    // tabStyle高度
    var tabStyle = {};
    if (style && style.height) {
      tabStyle = {
        height: style.height
      };
    }
    // 遍历
    return list.map(function (item, index) {
      var icon = item.icon,
          iconActive = item.iconActive,
          ricon = item.ricon,
          riconActive = item.riconActive,
          name = item.name,
          caption = item.caption,
          sndcaption = item.sndcaption,
          active = item.active,
          _item$attribute = item.attribute,
          attribute = _item$attribute === undefined ? {} : _item$attribute,
          _item$style = item.style,
          style = _item$style === undefined ? {} : _item$style;

      var isActive = active || activeIndex === index;
      var liconDOM = null;
      if (icon) {
        liconDOM = getIconDOM(icon, iconActive, isActive);
      }
      var riconDOM = null;
      if (ricon) {
        riconDOM = getIconDOM(ricon, riconActive, isActive);
      }
      return React.createElement(
        'li',
        _extends({ className: 'tab' + (isActive ? ' active' : ''), style: Object.assign(tabStyle, style || {}), 'data-index': index, key: index }, attribute),
        liconDOM && liconDOM,
        React.createElement(
          'div',
          _extends({ className: 'tab-content' }, contentAttribute),
          React.createElement(
            'div',
            _extends({}, captionAttribute, { className: 'tab-caption' + (captionAttribute.className ? ' ' + captionAttribute.className : '') }),
            caption || name
          ),
          sndcaption && React.createElement(
            'div',
            _extends({}, sndcaptionAttribute, { className: 'tab-sndcaption' + (sndcaptionAttribute.className ? ' ' + sndcaptionAttribute.className : '') }),
            sndcaption
          )
        ),
        riconDOM && riconDOM
      );
    });
  }
  // 获取tabbar样式
  var tabbarStyle = getTabbarStyle();
  // 获取tabbar的ClassName
  var tabbarClassName = getTabbarClassName();
  // 获取tabs的DOM
  var tabsDOM = getTabsDOM();

  return React.createElement(
    'ul',
    _extends({ ref: ref }, others, { className: tabbarClassName, disabled: disabled, style: tabbarStyle, onClick: click }),
    tabsDOM
  );
});

export default Tabbar;