'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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

/**
 * Tab is supplemental, clickable component used to help navigate content
 * @param props
 * @returns {XML}
 * @constructor
 */

var Tab = function (_React$PureComponent) {
  (0, _inherits3.default)(Tab, _React$PureComponent);

  function Tab() {
    (0, _classCallCheck3.default)(this, Tab);
    return (0, _possibleConstructorReturn3.default)(this, _React$PureComponent.apply(this, arguments));
  }

  Tab.prototype.componentDidUpdate = function componentDidUpdate() {
    this.props.focus && this.tabLink.focus();
  };

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

    var _props = this.props,
        heading = _props.heading,
        active = _props.active,
        onPress = _props.onPress,
        onKeyDown = _props.onKeyDown,
        role = _props.role,
        focus = _props.focus,
        className = _props.className,
        disabled = _props.disabled;

    /* Due to Collab UI must keep anchor element instead of button
     eventhough accessibility would like the anchor element to be switched
     to a button. */
    /* eslint-disable */

    return _react2.default.createElement(
      'li',
      (0, _extends3.default)({ className: 'cui-tab__item' + ('' + (className && ' ' + className || '')) + ('' + (active ? ' active' : '')) + ('' + (disabled ? ' disabled' : ''))
      }, !disabled ? { tabIndex: '-1' } : {}),
      _react2.default.createElement(
        'a',
        {
          ref: function ref(_ref) {
            return _this2.tabLink = _ref;
          },
          role: role,
          href: 'javascript:void(0)',
          onKeyDown: onKeyDown,
          onClick: onPress,
          tabIndex: focus ? 0 : -1,
          'aria-current': active
        },
        heading
      )
    );
  };

  return Tab;
}(_react2.default.PureComponent);

/* eslint-enable */

Tab.displayName = 'Tab';
exports.default = Tab;


Tab.defaultProps = {
  active: false,
  myKey: 0,
  onPress: null,
  onKeyPress: null,
  role: 'tab',
  focus: false,
  className: '',
  disabled: false
};
module.exports = exports['default'];