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

const ListItem = props => {
  const draggableBtn = (
    <div className="pf-c-dual-list-selector__draggable">
      <button
        className="pf-c-button pf-m-plain"
        type="button"
        aria-pressed="false"
        aria-label="Reorder"
        id="draggable-list-item-2-draggable-button"
        aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
        aria-describedby="draggable-help"
      >
        <i className="fas fa-grip-vertical" aria-hidden="true" />
      </button>
    </div>
  );

  const orderBtn = (
    <span className="foreman-dual-list-order">{`${props.index + 1}.`}</span>
  );

  return (
    <li className="pf-c-dual-list-selector__list-item">
      <div
        className={classNames('pf-c-dual-list-selector__list-item-row ', {
          'pf-m-selected': props.selected,
          'pf-m-ghost-row': props.dragging,
        })}
      >
        {props.draggable && draggableBtn}
        <button
          className="pf-c-dual-list-selector__item"
          type="button"
          onClick={props.onClick}
        >
          <span className="pf-c-dual-list-selector__item-main">
            <span className="pf-c-dual-list-selector__item-text">
              {props.draggable && orderBtn}
              <span>{props.name}</span>
            </span>
          </span>
          <span className="pf-c-dual-list-selector__item-count">
            <span className="pf-c-badge pf-m-read" />
          </span>
        </button>
      </div>
    </li>
  );
};

ListItem.propTypes = {
  selected: PropTypes.bool.isRequired,
  dragging: PropTypes.bool,
  draggable: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  index: PropTypes.number.isRequired,
};

ListItem.defaultProps = {
  draggable: false,
  dragging: false,
};

export default ListItem;