export const ATTR_FOCUSABLE = "data-kbd-focusable";

export const ATTR_GRID_ROW = "data-kbd-grid-row";

export const ATTR_GROUP = "data-kbd-group";

const name = "keyboardnav";

export const ATTR_FOCUSABLE = `data-${name}-focusable`;

export const ATTR_GRID_ROW = `data-${name}-grid-row`;

export const ATTR_GROUP = `data-${name}-group`;

export const SEL_FOCUSABLE = `[${ATTR_FOCUSABLE}]`;

export const SEL_GRID_ROW = `[${ATTR_GRID_ROW}]`;

export const SEL_GROUP = `[${ATTR_GROUP}]`;

export const DATA_GROUP_TYPE = "kbdGroup";

export const DATA_GROUP_TYPE = `${name}Group`;

export const DATA_TEMPORARY_FOCUSABLE = `${name}Temp`;

export const GROUP_TYPE_GRID = "grid";

export const GROUP_TYPE_HORIZONTAL = "horizontal";

export const GROUP_TYPE_VERTICAL = "vertical";

export const MOVE_DOWN = "d";

export const MOVE_UP = "u";

export const MOVE_LEFT = "l";

export const MOVE_RIGHT = "r";

export const MOVE_PREV = "p";

export const MOVE_NEXT = "n";

import {

  DATA_GROUP_TYPE,

  DATA_TEMPORARY_FOCUSABLE,

  GROUP_TYPE_GRID,

  GROUP_TYPE_HORIZONTAL,

  GROUP_TYPE_VERTICAL,

  MOVE_DOWN,

  MOVE_LEFT,

  MOVE_NEXT,

  MOVE_PREV,

  MOVE_RIGHT,

  MOVE_UP,

  SEL_FOCUSABLE,

  SEL_GRID_ROW,

  SEL_GROUP,

} from "./constants.ts";

import {

  arrayAt,

  findAll,

  findAllFocusable,

  findAllVisible,

  Lazy,

} from "./util.ts";

type GridDirection = "up" | "down" | "left" | "right";

type SequenceDirection = "prev" | "next";

type GridDirection =

  | typeof MOVE_UP

  | typeof MOVE_DOWN

  | typeof MOVE_LEFT

  | typeof MOVE_RIGHT;

type SequenceDirection = typeof MOVE_PREV | typeof MOVE_NEXT;

interface GroupModel {

  readonly type: string;

  cells: HTMLElement[];

}

class GridModel implements GroupModel {

  readonly #wraparound;

  #current?: GridCurrent;

  readonly type = GROUP_TYPE_GRID;

  constructor(readonly container: HTMLElement) {

  constructor(readonly container: HTMLElement, wraparound: boolean) {

    this.#wraparound = wraparound;

  }

  setCurrent(focusableElement: HTMLElement): boolean {

    const current = this.#getCurrent();

    if (!current) return false;

    const row = current.rows[current.y + direction];

    const row = arrayAt(current.rows, current.y + direction, this.#wraparound);

    if (!row) return false;

    const requestedX = current.requestedX ?? current.x;

    const current = this.#getCurrent();

    if (!current) return false;

    const cell = current.cells[current.x + direction];

    const cell = arrayAt(

      current.cells,

      current.x + direction,

      this.#wraparound,

    );

    if (!cell) return false;

    current.cell = cell;

  }

  moveFocus(direction: GridDirection): boolean {

    if (direction === "up") {

    if (direction === MOVE_UP) {

      return this.#tryMoveFocusUpDown(-1);

    } else if (direction === "down") {

    } else if (direction === MOVE_DOWN) {

      return this.#tryMoveFocusUpDown(1);

    } else if (direction === "left") {

    } else if (direction === MOVE_LEFT) {

      return this.#tryMoveFocusLeftRight(-1);

    } else if (direction === "right") {

    } else if (direction === MOVE_RIGHT) {

      return this.#tryMoveFocusLeftRight(1);

    }

  index: number;

}

class SequenceModel implements GroupModel {

  readonly #wraparound;

  #current?: SequenceCurrent;

  constructor(

    readonly type: typeof GROUP_TYPE_HORIZONTAL | typeof GROUP_TYPE_VERTICAL,

    readonly container: HTMLElement,

  ) {}

    wraparound: boolean,

  ) {

    this.#wraparound = wraparound;

  }

  setCurrent(focusableElement: HTMLElement): boolean {

    if (!isElementFocusable(focusableElement)) return false;

    const current = this.#getCurrent();

    if (!current) return false;

    const cell = current.cells[current.index + direction];

    const cell = arrayAt(

      current.cells,

      current.index + direction,

      this.#wraparound,

    );

    if (!cell) return false;

    current.cell = cell;

  moveFocus(direction: GridDirection): boolean {

    const type = this.type;

    if (

      (direction === "left" && type == GROUP_TYPE_HORIZONTAL) ||

      (direction === "up" && type === GROUP_TYPE_VERTICAL)

      (direction === MOVE_LEFT && type == GROUP_TYPE_HORIZONTAL) ||

      (direction === MOVE_UP && type === GROUP_TYPE_VERTICAL)

    ) {

      return this.#tryMoveFocus(-1);

    } else if (

      (direction === "right" && type == GROUP_TYPE_HORIZONTAL) ||

      (direction === "down" && type === GROUP_TYPE_VERTICAL)

      (direction === MOVE_RIGHT && type == GROUP_TYPE_HORIZONTAL) ||

      (direction === MOVE_DOWN && type === GROUP_TYPE_VERTICAL)

    ) {

      return this.#tryMoveFocus(1);

    }

class DocumentModel {

  readonly #groups = new WeakMap<Element, GroupModel>();

  readonly #tabWraparound;

  readonly #creators: Record<

    string,

    ((container: HTMLElement) => GroupModel) | undefined

  > = {

    [GROUP_TYPE_GRID]: (x) => new GridModel(x),

    [GROUP_TYPE_HORIZONTAL]: (x) => new SequenceModel(GROUP_TYPE_HORIZONTAL, x),

    [GROUP_TYPE_VERTICAL]: (x) => new SequenceModel(GROUP_TYPE_VERTICAL, x),

  };

  >;

  getGroupModel(element: EventTarget | null): GroupModel | undefined {

    if (!isElement(element)) return;

  constructor(

    { tabWraparound = false, arrowKeyWraparound = true }: KeyboardNavOptions =

      {},

  ) {

    this.#tabWraparound = tabWraparound;

    this.#creators = {

      [GROUP_TYPE_GRID]: (x) => new GridModel(x, arrowKeyWraparound),

      [GROUP_TYPE_HORIZONTAL]: (x) =>

        new SequenceModel(GROUP_TYPE_HORIZONTAL, x, arrowKeyWraparound),

      [GROUP_TYPE_VERTICAL]: (x) =>

        new SequenceModel(GROUP_TYPE_VERTICAL, x, arrowKeyWraparound),

    };

  }

  getGroupModel(element: HTMLElement): GroupModel | undefined {

    const groupElement = element.closest(SEL_GROUP);

    if (!isElement(groupElement)) return;

  }

  getAdjacentGroupModel(

    element: EventTarget | null,

    groupModel: GroupModel,

    direction: SequenceDirection,

  ): GroupModel | undefined {

    if (!isElement(element)) return;

    const groupElement = element.closest(SEL_GROUP);

    if (!isElement(groupElement)) return;

    const groupElements = findAll(document.body, SEL_GROUP);

    const length = groupElements.length;

    const index = groupElements.indexOf(groupElement);

    const dir = direction === "prev" ? -1 : 1;

    const newIndex = index + dir;

    const newIndexWrappedAround = (newIndex + length) % length;

    const index = groupElements.indexOf(groupModel.container);

    if (index === -1) return;

    const dir = direction === MOVE_PREV ? -1 : 1;

    const adjacentElement = arrayAt(

      groupElements,

      index + dir,

      this.#tabWraparound,

    );

    return this.getGroupModel(groupElements[newIndexWrappedAround]);

    return adjacentElement && this.getGroupModel(adjacentElement);

  }

}

export interface KeyboardNavOptions {

  /**

   * Whether to

   * Default: `false`

   */

  tabWraparound?: boolean;

  /**

   * Whether

   * Default: `true`

   */

  arrowKeyWraparound?: boolean;

}

export class KeyboardNav {

  readonly #documentModel;

  constructor(options?: KeyboardNavOptions) {

    this.#documentModel = new DocumentModel(options);

  }

  enable() {

    document.addEventListener("keydown", this.#keydownListener);

    document.addEventListener("focus", this.#focusListener, { capture: true });

  disable() {

    document.removeEventListener("keydown", this.#keydownListener);

    document.removeEventListener("focus", this.#focusListener);

    this.#subTreeObserver.valueIfInitialized?.disconnect();

    this.#temporaryFocusableDiv.valueIfInitialized?.remove();

  }

  readonly #documentModel = new DocumentModel();

  readonly #subTreeObserver = new Lazy(() =>

    new MutationObserver(() => {

      if (this.#lastFocused && !isElementFocusable(this.#lastFocused.element)) {

    })

  );

  readonly #temporaryFocusableDiv = new Lazy(() => {

    const div = document.createElement("div");

    div.tabIndex = 0;

    div.dataset[DATA_TEMPORARY_FOCUSABLE] = "";

    Object.assign(div.style, {

      position: "absolute",

      width: 0,

      height: 0,

      overflow: "hidden",

    });

    div.onblur = () => div.remove();

    return div;

  });

  #lastFocused?: {

    group: GroupModel;

    element: HTMLElement;

  };

  #focusListener = (e: FocusEvent) => {

    this.#subTreeObserver.value.disconnect();

    this.#subTreeObserver.valueIfInitialized?.disconnect();

    const element = e.target;

    if (element instanceof HTMLElement) {

  };

  static #keyDirectionMap: Record<string, GridDirection> = {

    ArrowDown: "down",

    ArrowUp: "up",

    ArrowLeft: "left",

    ArrowRight: "right",

    ArrowDown: MOVE_DOWN,

    ArrowUp: MOVE_UP,

    ArrowLeft: MOVE_LEFT,

    ArrowRight: MOVE_RIGHT,

  };

  #keydownListener = (e: KeyboardEvent) => {

    if (e.altKey || e.ctrlKey || e.metaKey) return;

    if (!(e.target instanceof HTMLElement)) return;

    let didFocus: boolean | undefined;

    if (key === "Tab") {

      didFocus = !!this.#documentModel.getAdjacentGroupModel(

        e.target,

        e.shiftKey ? "prev" : "next",

      )

        ?.focusCurrent();

      const groupModel = this.#documentModel.getGroupModel(e.target);

      if (groupModel) {

        const adjacentModel = this.#documentModel.getAdjacentGroupModel(

          groupModel,

          e.shiftKey ? MOVE_PREV : MOVE_NEXT,

        );

        if (adjacentModel) {

          didFocus = !!adjacentModel.focusCurrent();

        } else {

          // We can't control focus fully, but we can ensure that tabbing twice

          // will allow the user to tab out of the page.

          const div = this.#temporaryFocusableDiv.value;

          if (e.shiftKey) {

            document.body.prepend(div);

          } else {

            document.body.append(div);

          }

          div.focus();

          didFocus = true;

        }

      }

    } else if (!e.shiftKey && KeyboardNav.#keyDirectionMap[key]) {

      didFocus = this.#documentModel.getGroupModel(e.target)?.moveFocus(

        KeyboardNav.#keyDirectionMap[key],

    }

  };

}

export class SingletonKeyboardNav {

  #enabledCounter = 0;

  #keyboardNav = new KeyboardNav();

  #warning;

  constructor(warning: string) {

    this.#warning = warning;

  }

  enable() {

    if (this.#enabledCounter === 0) {

      this.#keyboardNav.enable();

    } else {

      console.warn(this.#warning);

    }

    this.#enabledCounter++;

  }

  disable() {

    this.#enabledCounter--;

    if (this.#enabledCounter === 0) {

      this.#keyboardNav.disable();

    }

  }

}

import { createContext } from "preact";

import { SingletonKeyboardNav } from "./mod.ts";

import { createContext, RefObject } from "preact";

import { useContext, useEffect } from "preact/hooks";

import {

  ATTR_FOCUSABLE,

  ATTR_GRID_ROW,

  ATTR_GROUP,

  GROUP_TYPE_GRID,

  GROUP_TYPE_HORIZONTAL,

  GROUP_TYPE_VERTICAL,

} from "./constants.ts";

import { GROUP_TYPE_VERTICAL } from "./constants.ts";

import { GROUP_TYPE_HORIZONTAL } from "./constants.ts";

import { KeyboardNav, KeyboardNavOptions } from "./mod.ts";

const keyboardNavContext = createContext(

  new SingletonKeyboardNav(

    "useKeyboardNav should only be called in one place",

  ),

);

const keyboardNavContext = createContext<RefObject<KeyboardNav>>({

  current: null,

});

export const useKeyboardNav = () => {

export const useKeyboardNav = (options?: KeyboardNavOptions) => {

  const ctx = useContext(keyboardNavContext);

  useEffect(() => {

    ctx.enable();

    return () => ctx.disable();

  }, [ctx]);

    if (ctx.current) {

      console.warn("useKeyboardNav should only be called in one place");

      return;

    }

    const nav = new KeyboardNav(options);

    nav.enable();

    ctx.current = nav;

    return () => {

      nav.disable();

      ctx.current = null;

    };

  }, [ctx, options]);

};

export const keyboardProps = {

  return true;

}

export function arrayAt<T>(

  array: T[],

  index: number,

  allowWraparound: boolean,

): T | undefined {

  return allowWraparound

    ? array[(index + array.length) % array.length]

    : array[index];

}

export class Lazy<T> {

  #init?: () => T;

  #value?: T;

    return this.#value as T;

  }

  get valueIfInitialized() {

    return this.#value;

  }

  constructor(init: () => T) {

    this.#init = init;

  }