// @flow
import React from 'react';
import cn from 'classnames';
import Checkbox from '../checkbox';

/** Flow тип Option - значение и их отображаемое наименование
  * @property {any} value - значение value пункта селекта
  * @property {string} label - видимое наименование пункта селекта
  */
export type Option = {
  value: any,
  label: string
};

/** Props передаваемые в SelectItem
  * @property {Option} option - значение и отображаемое наименование
  * @property {function (checked: boolean): void} onSelectionChanged - действия на изменения
  * состояния "выбран"/"не выбран"
  */
type SelectItemProps = {
  displayCheckboxes: Boolean,
  option: Option,
  checked: boolean,
  onSelectionChanged: (checked: boolean) => void,
};

/** State компонента SelectItem
  * @property {boolean} hovered - находится ли указатель мышки над компонентом
  */
type SelectItemState = {
  hovered: boolean
};

/** Компонент SelectItem - отображает один элемент из списка выбора */
export default class SelectItem extends React.Component <SelectItemProps, SelectItemState> {
  /* state = {
    hovered: false,
  } */

  handleClick = () => {
    this.toggleChecked();
  }

  toggleChecked = () => {
    const { checked, onSelectionChanged } = this.props;
    onSelectionChanged(!checked);
  }

  render() {
    const { option, checked, displayCheckboxes } = this.props;
    /* const { hovered } = this.state; */
    const itemClass = cn({
      'omni-select__item': true,
      'omni-select__item_checked': /* hovered || */ checked,
    });

    return (
      <label
      className={itemClass}
      role='option'
      selected={checked}
      onClick={this.handleClick}
      /* onMouseOver={() => this.setState({ hovered: true })}
      onMouseOut={() => this.setState({ hovered: false })} */
      >
        {displayCheckboxes && <Checkbox checked={checked} />}
        <span className='omni-select__item-renderer'>
          {option.label}
        </span>
      </label>
    );
  }
}