/* eslint-disable jsx-a11y/click-events-have-key-events */
/** Handling key events in the <Input/> component because that's where the
 * focus should be, according to the  ARIA Authoring Practices Guide
 * description of (combox patterns)[https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]
 */
import { useRef, useCallback, useEffect } from 'react';
import cx from "../../../../../utils/css/cx.js";
import customizable from "../../../../../utils/css/customizable.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes, {
  customizable: ['SearchInput__results-option']
});
const Option = function Option(props) {
  const {
    id,
    result,
    searchKey,
    idx,
    activeDescendent,
    updateUserSelection
  } = props;
  const ref = useRef();
  useEffect(() => {
    if (idx === activeDescendent) {
      ref.current.focus();
    }
  }, [idx, ref, activeDescendent]);
  const handleClick = useCallback(() => {
    updateUserSelection(result);
  }, [updateUserSelection, result]);
  return <li id={id} ref={ref} className={cls('container', customizable('SearchInput__results-option'))} role="option" aria-selected={activeDescendent === idx} onClick={handleClick}>
      {result[searchKey]}
    </li>;
};
export default Option;