'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

require('./style.scss');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var MenuItem = function MenuItem(props) {
  var children = props.children,
      className = props.className,
      color = props.color,
      openAt = props.openAt,
      disabled = props.disabled,
      icon = props.icon,
      onClick = props.onClick,
      value = props.value,
      TagName = props.TagName,
      attrs = _objectWithoutProperties(props, ['children', 'className', 'color', 'openAt', 'disabled', 'icon', 'onClick', 'value', 'TagName']);

  var isSubMenu = Array.isArray(children);
  var content = isSubMenu ? children[0] : children;
  var MenuItemClasses = ['Menu-Item', className, color && 'Menu-Item_' + color, disabled && 'Menu-Item_link_disabled', isSubMenu && 'Menu-Item_arrow', TagName === 'a' && 'Menu-Item_link'].filter(function (e) {
    return e;
  }).join(' ');

  var handleFocus = function handleFocus(e) {
    return e.stopPropagation();
  };

  var handleKeyDown = function handleKeyDown(e) {
    if (e.which !== 32 && e.which !== 13) return; // only fire onClick on space and enter
    if (typeof onClick === 'function') onClick(e);
  };

  if (isSubMenu) {
    return _react2.default.createElement(
      _.Dropdown,
      { justify: openAt, trigger: 'hover' },
      _react2.default.createElement(
        'div',
        _extends({}, attrs, { className: MenuItemClasses, role: 'button', tabIndex: 0 }),
        icon && _react2.default.createElement('i', { className: icon }),
        content
      ),
      _react2.default.createElement(
        _.Box,
        { bem: [['pop']], className: 'Menu-Item-SubMenu Menu-Item-SubMenu_' + openAt },
        children[1]
      )
    );
  }

  return _react2.default.createElement(
    'div',
    _extends({}, attrs, onClick && { onClick: onClick, onFocus: handleFocus, onKeyDown: handleKeyDown }, (onClick || TagName === 'a') && { role: 'button', tabIndex: 0 }, {
      className: MenuItemClasses
    }),
    icon && _react2.default.createElement('i', { className: icon }),
    content
  );
};

MenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes2.default.any,
  className: _propTypes2.default.string,
  color: _propTypes2.default.oneOf(['blue', 'green', 'purple', 'red', 'yellow']),
  disabled: _propTypes2.default.bool,
  icon: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  openAt: _propTypes2.default.oneOf(['left', 'right']),
  TagName: _propTypes2.default.string,
  value: _propTypes2.default.any
} : {};

MenuItem.defaultProps = {
  className: '',
  openAt: 'right',
  TagName: 'a'
};

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