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

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

import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown, Box } from './..';
import './style.scss';

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 React.createElement(
      Dropdown,
      { justify: openAt, trigger: 'hover' },
      React.createElement(
        'div',
        _extends({}, attrs, { className: MenuItemClasses, role: 'button', tabIndex: 0 }),
        icon && React.createElement('i', { className: icon }),
        content
      ),
      React.createElement(
        Box,
        { bem: [['pop']], className: 'Menu-Item-SubMenu Menu-Item-SubMenu_' + openAt },
        children[1]
      )
    );
  }

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

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

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

export default MenuItem;