import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
// navbar needs is just an <li><a>. The mobile menu is now collapsed from React
// state in Navigation (the parent <ul onClick>), so the old jQuery
// `data-toggle="collapse"` / `data-target` hooks were dropped here.
const propTypes = {
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  role: PropTypes.string,
  href: PropTypes.string,
  onClick: PropTypes.func,
  onSelect: PropTypes.func,
  eventKey: PropTypes.any,
  className: PropTypes.string,
  anchorClassName: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node
};

const defaultProps = {
  active: false,
  disabled: false
};

class NavItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    const { disabled, onClick, onSelect, eventKey } = this.props;
    if (disabled) {
      e.preventDefault();
      return;
    }
    if (onClick) onClick(e);
    if (onSelect) {
      e.preventDefault();
      onSelect(eventKey, e);
    }
  }

  render() {
    const {
      active, disabled, role, href, onClick, onSelect, eventKey,
      className, anchorClassName, style, children, ...props
    } = this.props;

    const anchorProps = { ...props };
    if (href) anchorProps.href = href;
    anchorProps.role = role || (href === '#' ? 'button' : undefined);
    if (role === 'tab') anchorProps['aria-selected'] = active;

    return (
      <li
        role="presentation"
        className={classNames(className, { active, disabled })}
        style={style}
      >
        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
        <a
          {...anchorProps}
          className={anchorClassName}
          onClick={this.handleClick}
        >
          {children}
        </a>
      </li>
    );
  }
}

NavItem.propTypes = propTypes;
NavItem.defaultProps = defaultProps;

export default NavItem;