import { Combobox } from '@headlessui/react' import Fuse from 'fuse.js' import { useCommandsContext } from 'hooks/useCommandsContext' import { CommandArgumentOption } from 'lib/commandTypes' import { useEffect, useRef, useState } from 'react' function CommandArgOptionInput({ options, argName, stepBack, onSubmit, placeholder, }: { options: CommandArgumentOption[] argName: string stepBack: () => void onSubmit: (data: unknown) => void placeholder?: string }) { const { commandBarSend, commandBarState } = useCommandsContext() const inputRef = useRef(null) const formRef = useRef(null) const [argValue, setArgValue] = useState<(typeof options)[number]['value']>( options.find((o) => 'isCurrent' in o && o.isCurrent)?.value || commandBarState.context.argumentsToSubmit[argName] || options[0].value ) const [query, setQuery] = useState('') const [filteredOptions, setFilteredOptions] = useState() const fuse = new Fuse(options, { keys: ['name', 'description'], threshold: 0.3, }) useEffect(() => { inputRef.current?.focus() inputRef.current?.select() }, [inputRef]) useEffect(() => { const results = fuse.search(query).map((result) => result.item) setFilteredOptions(query.length > 0 ? results : options) }, [query]) function handleSelectOption(option: CommandArgumentOption) { setArgValue(option) onSubmit(option.value) } function handleSubmit(e: React.FormEvent) { e.preventDefault() onSubmit(argValue) } return (
setQuery(event.target.value)} className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none" onKeyDown={(event) => { if (event.metaKey && event.key === 'k') commandBarSend({ type: 'Close' }) if (event.key === 'Backspace' && !event.currentTarget.value) { stepBack() } }} placeholder={ (argValue as CommandArgumentOption)?.name || placeholder || 'Select an option for ' + argName } autoCapitalize="off" autoComplete="off" autoCorrect="off" spellCheck="false" autoFocus />
{filteredOptions?.map((option) => (

{option.name}

{'isCurrent' in option && option.isCurrent && ( current )}
))}
) } export default CommandArgOptionInput