import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem as RAMMenuItem } from 'react-aria-menubutton';
import classNames from 'classnames';

import pickDataAttributes from '../../../../utils/pickDataAttributes';

const MenuItem = ({ className, children, indented, item }) => {
  const { label, to, action, target, ...rest } = item;
  const isLink = !!to;
  const isHandler = action && typeof action === 'function';
  const isClickable = isLink || isHandler;

  const handleClick = e => {
    if (isHandler) {
      e.preventDefault();
      action();
    }
  };

  return (
    <li className={className}>
      <RAMMenuItem
        className={classNames({
          'Menu-item': true,
          'u-indented': indented,
          'u-noPointer': !isClickable,
        })}
        tag={isLink ? 'a' : 'span'}
        href={action ? null : to}
        target={target}
        onClick={handleClick}
        {...pickDataAttributes(rest)}
      >
        {label}
      </RAMMenuItem>
      {children}
    </li>
  );
};

export const menuItemPropTypes = {
  label: PropTypes.node.isRequired,
  to: PropTypes.string,
  action: PropTypes.func,
  target: PropTypes.string,
};

MenuItem.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  indented: PropTypes.bool,
  item: PropTypes.shape(menuItemPropTypes),
};

MenuItem.defaultProps = {
  className: '',
  children: undefined,
  indented: false,
  item: {
    to: undefined,
    action: undefined,
    target: '_self',
  },
};

export default MenuItem;