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; }

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import shortid from 'shortid';
import is from 'is';
import './style.css';
import TabContext from './context';

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 (is.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 = React.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 = shortid.generate();
    _this.focusOnTabBody = function () {
      _this.tabBodyRef.current.setAttribute('tabindex', '0');
      _this.tabBodyRef.current.focus();
    };
    var tabRefs = {};
    var activeTab = null;
    React.Children.forEach(props.children, function (child, index) {
      var id = shortid.generate();
      tabIds.set(index, id);
      tabRefs[tabIds.get(index)] = React.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: shortid.generate(),
      tabContainerBodyId: shortid.generate(),
      // eslint-disable-next-line react/no-unused-state
      tabBodyRef: _this.tabBodyRef
    };
    return _this;
  }

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

    var classes = classNames({
      'ma__tab-container': true,
      'ma__tab-container--nested': this.props.nested
    });
    var ulClasses = classNames({
      '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 = React.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 React.cloneElement(child, newProps, child.props.children);
    });
    return React.createElement(
      TabContext.Provider,
      { value: this.state },
      React.createElement(
        'div',
        { className: classes },
        React.createElement(
          'ul',
          { className: ulClasses, id: this.state.tabContainerId, role: 'tablist' },
          React.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
        ),
        React.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;
}(React.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: PropTypes.bool,
  /** The numerical index of which tab should default to be open, starting at 0. */
  defaultTab: PropTypes.number,
  /** A callback function for a tab change, receives the tab's id and children */
  onTabChange: PropTypes.func,
  /** Children passed to tab container.  */
  children: PropTypes.node
} : {};

export default TabContainer;