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

/**
 * @category layout
 * @component accordion
 * @variations collab-ui-react
 */

var _ref = _react2.default.createElement('span', { className: 'cui-accordion__header-icon' });

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

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

  AccordionHeader.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
    var focus = this.props.focus;

    !prevProps.focus && focus && this.headerRef.focus();
  };

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

    var _props = this.props,
        children = _props.children,
        className = _props.className,
        disabled = _props.disabled,
        showSeparator = _props.showSeparator,
        height = _props.height;
    var _context = this.context,
        onClick = _context.onClick,
        onKeyDown = _context.onKeyDown;


    return _react2.default.createElement(
      'div',
      {
        role: 'button',
        ref: function ref(_ref2) {
          return _this2.headerRef = _ref2;
        },
        onClick: onClick,
        onKeyDown: onKeyDown,
        tabIndex: !disabled ? 0 : -1,
        className: 'cui-accordion__header' + ('' + (showSeparator && ' cui-accordion__header--separator' || '')) + ('' + (height && ' cui-accordion__header--' + height || '')) + ('' + (className && ' ' + className || ''))
      },
      children,
      _ref
    );
  };

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

AccordionHeader.displayName = 'AccordionHeader';
AccordionHeader.contextTypes = {
  onClick: _propTypes2.default.func,
  onKeyDown: _propTypes2.default.func
};
exports.default = AccordionHeader;


AccordionHeader.defaultProps = {
  children: null,
  className: '',
  disabled: false,
  focus: false,
  showSeparator: true,
  height: ''
};
module.exports = exports['default'];