import React from 'react';
import PropTypes from 'prop-types';
import styles from './Option.css';
import cn from 'classnames';

class Option extends React.Component {

  ref = null;

  handleRef = (ref) => {
    this.ref = ref;
  };

  focus = () => {this.ref.focus();}
  hasFocus = () => document.activeElement === this.ref;

  render() {
    const {className, label = '', onClick, onKeyDown} = this.props;
    const id = this.props.id ? this.props.id : this.props.value;
    return (
      <li className={cn(styles.option, className, 'dd-option')} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef} id={id}>
        {label}
      </li>
    );
  }
}

Option.propTypes = {
  className: PropTypes.string,
  id: PropTypes.string,
  label: PropTypes.string,
  onClick: PropTypes.func,
  onKeyDown: PropTypes.func,
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.bool
  ]),
};

export default Option;