import { useState, useCallback } from "react";
import type { FocusArea, ButtonFocus } from "../types.js";

/**
 * Manages which area of the wizard UI has keyboard focus and
 * which specific element within that area is highlighted.
 */
export function useWizardFocus() {
  const [focusArea, setFocusArea] = useState<FocusArea>("content");
  const [focusedButton, setFocusedButton] = useState<ButtonFocus>("next");
  const [focusedInput, setFocusedInput] = useState(0);

  /** Reset focus to the content area at the first element. */
  const resetToContent = useCallback(() => {
    setFocusArea("content");
    setFocusedInput(0);
  }, []);

  /** Move focus to the button bar. */
  const moveToButtons = useCallback((button: ButtonFocus = "next") => {
    setFocusArea("buttons");
    setFocusedButton(button);
  }, []);

  return {
    focusArea,
    setFocusArea,
    focusedButton,
    setFocusedButton,
    focusedInput,
    setFocusedInput,
    resetToContent,
    moveToButtons,
  } as const;
}

export type WizardFocusState = ReturnType<typeof useWizardFocus>;