import { createSignal, For } from "solid-js";
import { useInput } from "../input/hooks.jsx";
/**
 * A keyboard- and mouse-navigable list. `↑`/`↓` (or `k`/`j`) move the
 * highlight, Enter commits it, and — when the screen has `mouse: true` — hover
 * highlights a row and a click commits it. Each row is `indicator + label`, the
 * indicator marking the current row in the gutter so labels stay aligned.
 *
 * Uncontrolled by default (it tracks the highlight itself); pass `index` to
 * drive the highlight from the parent. `onHighlight` fires as the highlight
 * moves, `onSelect` when a row is committed.
 *
 * ```tsx
 * <Select
 *   items={["Build", "Test", "Deploy"]}
 *   onSelect={(item) => run(item)}
 * />
 * ```
 */
export function Select(props) {
  const [internal, setInternal] = createSignal(props.index ?? 0);
  const current = () => props.index ?? internal();
  const indicator = () => props.indicator ?? "❯";
  const focused = () => props.focused ?? true;
  const highlight = i => {
    setInternal(i);
    const item = props.items[i];
    if (item !== undefined) props.onHighlight?.(item, i);
  };
  const move = delta => {
    const n = props.items.length;
    if (n === 0) return;
    highlight((current() + delta + n) % n);
  };
  const commit = i => {
    const item = props.items[i];
    if (item !== undefined) props.onSelect?.(item, i);
  };
  useInput(key => {
    if (!focused() || props.items.length === 0) return;
    if (key.name === "up" || key.name === "k") move(-1);else if (key.name === "down" || key.name === "j") move(1);else if (key.name === "return") commit(current());
  });
  return <box flexDirection="column">
			<For each={props.items}>
				{(item, i) => {
        const highlighted = () => i() === current();
        return <box flexDirection="row" onClick={() => {
          setInternal(i());
          commit(i());
        }} onMouseEnter={() => highlight(i())}>
							<text bold color={props.highlightColor ?? "#d77757"}>
								{highlighted() ? `${indicator()} ` : "  "}
							</text>
							{props.children ? props.children(item, highlighted(), i()) : <text bold={highlighted()} color={highlighted() ? props.highlightColor ?? "#d77757" : props.color}>
									{String(item)}
								</text>}
						</box>;
      }}
			</For>
		</box>;
}
//# sourceMappingURL=select.jsx.map