import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import isEqual from 'fast-deep-equal';

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

const renderItem = ({ selected, disabled, itemClassName }) =>
  function verticalMenuItem(item) {
    const isSelected = isEqual(item, selected);
    const itemClasses = classNames('VerticalMenu-item', {
      'VerticalMenu-item--selected': isSelected,
      'VerticalMenu-item--disabled': disabled,
    });
    const { icon, label, key, id, onSelect, ...attributes } = item;

    return (
      <li id={id} className={itemClasses} key={key}>
        <button onClick={onSelect} disabled={disabled} {...pickDataAttributes(attributes)} className={itemClassName}>
          {icon && <Icon icon={icon} dimensions="small" />}
          {label}
        </button>
      </li>
    );
  };

const VerticalMenu = ({ className, itemClassName, disabled, header, items, selected }) => (
  <nav className={className}>
    {header ? <h2 className="VerticalMenu-header">{header}</h2> : null}
    <ol className="VerticalMenu-items">{items.map(renderItem({ selected, disabled, itemClassName }))}</ol>
  </nav>
);

VerticalMenu.propTypes = {
  className: PropTypes.string,
  itemClassName: PropTypes.string,
  header: PropTypes.node,
  items: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      id: PropTypes.string,
      label: PropTypes.node.isRequired,
      onSelect: PropTypes.func.isRequired,
      icon: PropTypes.any,
    })
  ).isRequired,
  selected: PropTypes.object,
  disabled: PropTypes.bool,
};

VerticalMenu.defaultProps = {
  className: null,
  itemClassName: null,
  header: null,
  selected: null,
  disabled: false,
};

export default VerticalMenu;