// @flow
import React from 'react';
import cn from 'classnames';

/** Props, передаваемые в ResultItem
  * @property {string} value - значение, отображаемое в списке результатов
  * @property {Function} onClickItem - передается функция-коллбэк, которая принимает значение
  * выбранного (по которому кликнули мышкой) элемента
  */
type ResultItemProps = {
  value: string,
  onClickItem: Function,
};

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

/** Компонент ResultItem - отображает один элемент из списка результатов поиска */
export default class ResultItem extends React.Component<ResultItemProps, ResultItemState> {
  static defaultProps = {};

  constructor(props: ResultItemProps) {
    super(props);
    this.state = {
      hovered: false,
    };
  }

  render() {
    const { value, onClickItem } = this.props;
    const { hovered } = this.state;
    const resultItemClasses = cn({
      'omni-search__item': true,
      'omni-search__item_hovered': hovered,
    });

    return (
      <div
        className={resultItemClasses}
        onClick={onClickItem(value)}
        onMouseOver={() => this.setState({ hovered: true })}
        onMouseOut={() => this.setState({ hovered: false })}
      >
        <span className='omni-search__item-renderer'>{value}</span>
      </div>
    );
  }
}