import { Dispatch, KeyboardEvent, SetStateAction } from "react";

//#region src/components/overlays/_internal/use-list-navigation.d.ts
type ListItemProps = {
  ref: (node: HTMLElement | null) => void;
  tabIndex: number;
  onFocus: () => void;
};
type ListNavigation = {
  getContentProps: () => {
    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
  };
  getItemProps: (index: number) => ListItemProps;
};
/**
 * 矢印キーによる roving-tabindex のリストナビゲーション。
 * floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
 *
 * コンテンツの書字方向に追従してキーを割り当てる:
 * - 横書き: ↑=前 / ↓=次
 * - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前（↑/↓ も保険として有効）
 *
 * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
 * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
 */
declare const useListNavigation: ({
  open,
  activeIndex,
  setActiveIndex,
  selectedIndex,
  loop
}: {
  open: boolean;
  activeIndex: number | null;
  setActiveIndex: Dispatch<SetStateAction<number | null>>;
  selectedIndex?: number | null;
  loop?: boolean;
}) => ListNavigation;
//#endregion
export { ListItemProps, ListNavigation, useListNavigation };