"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/web.dom.iterable");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * Tabs is container component for rendering tabs and tab-panels
 * @category layout
 * @component tabs
 * @variations collab-ui-react
 *
 */
var Tabs =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Tabs, _React$Component);

  function Tabs() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      activeIndex: 0,
      focus: _this.props.focus
    };

    _this.getChildContext = function () {
      return {
        activeIndex: _this.state.activeIndex,
        onActivate: function onActivate(index) {
          return _this.setSelected(index);
        },
        onFocus: function onFocus(index) {
          return _this.setState({
            focus: index
          });
        },
        focus: _this.state.focus
      };
    };

    _this.getMobileListItems = function () {
      return _react.default.Children.map(_this.props.children, function (child) {
        if (child.type.displayName === 'TopbarNav') {
          return child.props.children;
        }
      });
    };

    _this.getChildrenElements = function (name) {
      var elementCount = 0;

      _react.default.Children.forEach(_this.props.children, function (child) {
        if (child.type.displayName === name) {
          return child.props.children.length ? elementCount += child.props.children.length : elementCount++;
        }
      });

      return elementCount;
    };

    _this.setSelected = function (index) {
      // Don't do anything if index is the same or outside of the bounds
      if (index === _this.state.activeIndex || index < 0 || index >= _this.getChildrenElements('TabList')) return; // Keep reference to last index for event handler

      var last = _this.state.activeIndex; // Update state with selected index

      _this.setState({
        activeIndex: index
      }); // Call change event handler


      if (typeof _this.props.onSelect === 'function') {
        _this.props.onSelect(index, last);
      }
    };

    return _this;
  }

  var _proto = Tabs.prototype;

  _proto.componentWillMount = function componentWillMount() {
    var tabsCount = this.getChildrenElements('TabList');
    var panelsCount = this.getChildrenElements('TabContent');

    if (tabsCount !== panelsCount) {
      throw new Error("There should be an equal number of Tabs and TabPanels.\n      Received " + tabsCount + " Tabs and " + panelsCount + " TabPanels.");
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        tabType = _this$props.tabType,
        justified = _this$props.justified;

    var cloneChildren = _react.default.Children.map(children, function (child) {
      if (child.type.displayName === 'TabContent') {
        return _react.default.cloneElement(child, {
          activeIndex: _this2.state.activeIndex
        });
      } else if (child.type.displayName === 'TabList') {
        return _react.default.cloneElement(child, {
          role: 'tab'
        });
      } else {
        return child;
      }
    });

    return _react.default.createElement("div", {
      className: 'cui-tab' + ("" + (tabType && " cui-tab--" + tabType || '')) + ("" + (justified && " cui-tab--justified" || '')) + (className && " " + className) || '',
      type: tabType
    }, cloneChildren);
  };

  return Tabs;
}(_react.default.Component);

Tabs.displayName = 'Tabs';
Tabs.childContextTypes = {
  focus: _propTypes.default.number,
  activeIndex: _propTypes.default.number,
  onActivate: _propTypes.default.func,
  onFocus: _propTypes.default.func
};
Tabs.propTypes = {
  /**
   * Children of Tab and TabContent required to work
   */
  children: _propTypes.default.node.isRequired,

  /**
   * optional className prop type
   */
  className: _propTypes.default.string,

  /**
   * optional onSelect prop type defaults to navigating to other panes
   */
  onSelect: _propTypes.default.func,

  /**
   * optional tabType prop type defaults to horizontal
   */
  tabType: _propTypes.default.oneOf(['pills']),

  /**
   * optional justified prop type
   */
  justified: _propTypes.default.bool,

  /**
   * optional focusIndex prop
   */
  focus: _propTypes.default.number
};
Tabs.defaultProps = {
  active: false,
  tabType: 'pills',
  className: '',
  justified: false,
  focus: 0
};
var _default = Tabs;
/**
* @name Tabs Pills
*
* @category layout
* @component tabs
* @section horizontal-pills
*
* @js

 import { Tab, TabContent, TabPane, TabList } from '@collab-ui/react';

 export default function() {
  return (
    <div className='row'>
      <div className='columns'>
        <Tabs>
          <TabList>
            <Tab
              heading='First Tab'
            />
            <Tab
              heading='Second Tab'
            />
            <Tab
              heading='Third Tab'
            />
          </TabList>
          <TabContent>
            <TabPane>
              Testing 1
            </TabPane>
            <TabPane>
              Testing 2
            </TabPane>
            <TabPane>
              Testing 3
            </TabPane>
          </TabContent>
        </Tabs>
      </div>
    </div>
  );
}
**/

/**
* @name Tabs Pills (Justified)
*
* @category layout
* @component tabs
* @section horizontal-pills-justified
*
* @js

 import { Tab, TabContent, TabPane, TabList } from '@collab-ui/react';

 export default function() {
  return (

    <div className='row'>
      <div className='columns'>
        <Tabs justified>
          <TabList>
            <Tab
              heading='First Tab'
            />
            <Tab
              heading='Second Tab'
            />
            <Tab
              heading='Third Tab'
            />
          </TabList>
          <TabContent>
            <TabPane>
              Testing 1
            </TabPane>
            <TabPane>
              Testing 2
            </TabPane>
            <TabPane>
              Testing 3
            </TabPane>
          </TabContent>
        </Tabs>
      </div>
    </div>
  );
}
**/

exports.default = _default;