/* eslint-disable jsx-a11y/label-has-associated-control */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Icon from './Icon';

import '../base';
import styles from './Menu.Item.styl';

export default function MenuItem({ children, label, info, icon, back, selected, disabled, clickable = true, onClick }) {

  const classes = classNames({
    [styles.menuitem]: true,
    [styles.clickable]: clickable,
    [styles.hasChildren]: children,
    [styles.back]: back,
    [styles.selected]: selected,
    [styles.disabled]: disabled
  });

  const labelClasses = classNames({
    [styles.label]: true
  });

  const textClasses = classNames({
    [styles.text]: true
  });

  const rightIconClasses = classNames({
    [styles.rightIcon]: true
  });

  /* eslint-disable jsx-a11y/label-has-for */
  return (
    <div className={classes} onClick={onClick}>
      {
        back ? <Icon name="doka-icon-back" /> : null
      }
      <div className={textClasses}>
        {
          label ? <label className={labelClasses}>{label}</label> : null
        }
        {children}
        {
          icon ? <Icon className={rightIconClasses} name={icon} /> : null
        }
        {
          info ? <label className={labelClasses}>{info}</label> : null
        }
      </div>
    </div>
  );
}

MenuItem.propTypes = {
  children: PropTypes.node,
  label: PropTypes.string,
  info: PropTypes.string,
  icon: PropTypes.string,
  back: PropTypes.bool,
  selected: PropTypes.bool,
  disabled: PropTypes.bool,
  clickable: PropTypes.bool
};

MenuItem.defaultProps = {
  children: undefined,
  label: undefined,
  info: undefined,
  icon: undefined,
  back: undefined,
  selected: undefined,
  disabled: undefined,
  clickable: undefined
};