'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _shortid = require('shortid');

var _shortid2 = _interopRequireDefault(_shortid);

var _is = require('is');

var _is2 = _interopRequireDefault(_is);

require('./style.css');

var _context = require('./context');

var _context2 = _interopRequireDefault(_context);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TabContainer = function (_React$Component) {
  _inherits(TabContainer, _React$Component);

  function TabContainer(props) {
    _classCallCheck(this, TabContainer);

    // Allows Tab to interact directly with the tab body div through context.
    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.setActiveTab = function (tabId) {
      var state = {
        activeTab: tabId
      };
      _this.setState(state, function () {
        if (_is2.default.fn(_this.props.onTabChange)) {
          _this.props.onTabChange(_this.state.tabRefs[tabId], tabId);
        }
      });
      if (_this.state.tabRefs[tabId].current.focus) {
        _this.state.tabRefs[tabId].current.focus();
      }
    };

    _this.tabBodyRef = _react2.default.createRef();
    // When false, runs key down code for nested containers.
    _this.preventBodyKeyDown = false;
    var tabIds = new Map();
    // This only works for class components because it is not re-generated on every render.
    _this.spanId = _shortid2.default.generate();
    _this.focusOnTabBody = function () {
      _this.tabBodyRef.current.setAttribute('tabindex', '0');
      _this.tabBodyRef.current.focus();
    };
    var tabRefs = {};
    var activeTab = null;
    _react2.default.Children.forEach(props.children, function (child, index) {
      var id = _shortid2.default.generate();
      tabIds.set(index, id);
      tabRefs[tabIds.get(index)] = _react2.default.createRef();
      if (index === props.defaultTab) {
        activeTab = id;
      }
    });
    _this.state = {
      activeTab: activeTab,
      // eslint-disable-next-line react/no-unused-state
      setActiveTab: _this.setActiveTab,
      // eslint-disable-next-line react/no-unused-state
      focusOnTabBody: _this.focusOnTabBody,
      tabIds: tabIds,
      tabRefs: tabRefs,
      tabContainerId: _shortid2.default.generate(),
      tabContainerBodyId: _shortid2.default.generate(),
      // eslint-disable-next-line react/no-unused-state
      tabBodyRef: _this.tabBodyRef
    };
    return _this;
  }

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

    var classes = (0, _classnames2.default)({
      'ma__tab-container': true,
      'ma__tab-container--nested': this.props.nested
    });
    var ulClasses = (0, _classnames2.default)({
      'ma__tab-container-head': true,
      'ma__tab-container-head--nested': this.props.nested,
      'ma__tab-container-head--parent': !this.props.nested
    });
    // eslint-disable-next-line react/prop-types
    var children = this.props.children;

    var childrenWithProps = _react2.default.Children.map(children, function (child, index) {
      var newProps = {
        active: _this2.state.activeTab === _this2.state.tabIds.get(index),
        tabIdent: _this2.state.tabIds.get(index),
        tabRef: _this2.state.tabRefs[_this2.state.tabIds.get(index)]
      };
      return _react2.default.cloneElement(child, newProps, child.props.children);
    });
    return _react2.default.createElement(
      _context2.default.Provider,
      { value: this.state },
      _react2.default.createElement(
        'div',
        { className: classes },
        _react2.default.createElement(
          'ul',
          { className: ulClasses, id: this.state.tabContainerId, role: 'tablist' },
          _react2.default.createElement(
            'span',
            { id: this.spanId, className: 'ma__visually-hidden' },
            'Use left and right arrows to navigate between tabs, up and down arrows to navigate between active tab and its content.'
          ),
          childrenWithProps
        ),
        _react2.default.createElement('div', {
          'aria-labelledby': this.state.activeTab,
          className: 'ma__tab-container-body',
          tabIndex: 0,
          ref: this.tabBodyRef,
          role: 'tabpanel',
          id: this.state.tabContainerBodyId
        })
      )
    );
  };

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

TabContainer.defaultProps = {
  nested: false,
  defaultTab: 0
};

TabContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  /** When true, the styles of the container changes to drop borders around each tab. */
  nested: _propTypes2.default.bool,
  /** The numerical index of which tab should default to be open, starting at 0. */
  defaultTab: _propTypes2.default.number,
  /** A callback function for a tab change, receives the tab's id and children */
  onTabChange: _propTypes2.default.func,
  /** Children passed to tab container.  */
  children: _propTypes2.default.node
} : {};

exports.default = TabContainer;
module.exports = exports['default'];