'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

/**
 * Tabs is container component for rendering tabs and tab-panels
 * @category layout
 * @component tabs
 * @variations collab-ui-react
 *
 */

var Tabs = function (_React$Component) {
  (0, _inherits3.default)(Tabs, _React$Component);

  function Tabs() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Tabs);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(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 _react2.default.Children.map(_this.props.children, function (child) {
        if (child.type.displayName === 'TopbarNav') {
          return child.props.children;
        }
      });
    }, _this.getChildrenElements = function (name) {
      var elementCount = 0;

      _react2.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);
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Tabs.prototype.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.');
    }
  };

  Tabs.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        children = _props.children,
        className = _props.className,
        tabType = _props.tabType,
        justified = _props.justified;


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

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

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

Tabs.displayName = 'Tabs';
exports.default = Tabs;


Tabs.childContextTypes = {
  focus: _propTypes2.default.number,
  activeIndex: _propTypes2.default.number,
  onActivate: _propTypes2.default.func,
  onFocus: _propTypes2.default.func
};

Tabs.defaultProps = {
  active: false,
  tabType: 'pills',
  className: '',
  justified: false,
  focus: 0
};

/**
* @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>
  );
}
**/

module.exports = exports['default'];