import { useCallback } 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__input']
});
const Input = function Input(props) {
  const {
    resultsVisible,
    resultsId,
    placeholder,
    setSearchQuery,
    activeDescendent,
    updateActiveDescendent,
    closeResults,
    updateUserSelection,
    inputRef,
    inputId,
    setShowList,
    edgeClasses,
    shadowClasses
  } = props;
  const onInputChange = useCallback(e => setSearchQuery(e.target.value), [setSearchQuery]);
  const formattedActiveDescendent = activeDescendent > -1 ? `${resultsId}-${activeDescendent}` : undefined;
  const handleKeyDown = useCallback(event => {
    if (event.key === 'Escape') {
      closeResults();
    }
    if (event.key === 'Down' || event.key === 'ArrowDown') {
      if (activeDescendent === -1) {
        setShowList(true);
      }
      updateActiveDescendent({
        direction: 'down'
      });
    }
    if (event.key === 'Up' || event.key === 'ArrowUp') {
      updateActiveDescendent({
        direction: 'up'
      });
    }
    if (event.key === 'Enter') {
      updateUserSelection();
    }
  }, [updateUserSelection, updateActiveDescendent, closeResults, activeDescendent]);
  return <input id={inputId} ref={inputRef} placeholder={placeholder} className={cls('input', edgeClasses, shadowClasses, customizable('SearchInput__input'))} type="text" role="combobox" aria-expanded={resultsVisible} aria-activedescendant={formattedActiveDescendent} aria-autocomplete="list" aria-controls={resultsId} onChange={onInputChange} onKeyDown={handleKeyDown} />;
};
export default Input;