// packages/core/src/components/command-palette/command-palette-input.tsx
import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useCommandPaletteContext } from "./command-palette-context";
import type { CommandPaletteInputProps } from "./command-palette.props";

/**
 * Search input for CommandPalette. Updates search state on input and delegates
 * arrow-key / Enter navigation to the list navigation handler.
 */
export function CommandPaletteInput(props: CommandPaletteInputProps): JSX.Element {
  const [local, rest] = splitProps(props, ["placeholder"]);
  const ctx = useCommandPaletteContext();

  function handleInput(e: InputEvent & { currentTarget: HTMLInputElement }): void {
    ctx.setSearch(e.currentTarget.value);
  }

  function handleKeyDown(e: KeyboardEvent): void {
    ctx.navigation.containerProps.onKeyDown(e);
  }

  return (
    <input
      type="text"
      role="combobox"
      aria-expanded="true"
      aria-autocomplete="list"
      aria-activedescendant={ctx.navigation.containerProps["aria-activedescendant"]}
      placeholder={local.placeholder}
      value={ctx.searchValue()}
      onInput={handleInput}
      onKeyDown={handleKeyDown}
      {...rest}
    />
  );
}
