import { KeymapKey, KeymapLayer } from "@keymapkit/ui";
import {
  transparentLeftFingerMods,
  transparentLeftThumbkeys,
  transparentRightFingerMods,
  transparentRightThumbkeys,
} from "./keyTransparents";
import { keyLegends } from "./keyLegends";
import { keyInfo } from "./keyInfo";
import { keySelection } from "./keySelection";

export function newFnKey(name: string, physicalKeyId: string) {
  return new KeymapKey({
    name,
    // textLegend: name.toUpperCase(),
    htmlLegend: `<span style="font-size: .7rem;">${name.toUpperCase()}</span>`,
    id: physicalKeyId,
    info: keyInfo.fKeys,
    selection: keySelection.fKeys,
  });
}

export const layer2fn = KeymapLayer.fromKeyList({
  displayName: "Function Layer",
  shortName: "Function",
  welcome: [
    `This is the function layer`,
    `Hold FN with the left hand to use F1–F12 and the right-hand numpad, plus system controls.`,
    `Select a key from the board above to learn more about it.`,
  ],
  layerEntryKeys: ["l-t-9-1"], // The layer selection key
  keys: [
    // #region Left Finger Grid (l-f)
    newFnKey("F1", "l-f-6-1"),
    newFnKey("F2", "l-f-10-1"),
    newFnKey("F3", "l-f-14-1"),
    newFnKey("F4", "l-f-18-1"),
    newFnKey("F5", "l-f-22-1"),

    newFnKey("F6", "l-f-6-5"),
    newFnKey("F7", "l-f-10-5"),
    newFnKey("F8", "l-f-14-5"),
    newFnKey("F9", "l-f-18-5"),
    newFnKey("F10", "l-f-22-5"),

    new KeymapKey({
      id: "l-f-1-9",
      ...keyLegends.capsLock,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    newFnKey("F11", "l-f-6-9"),
    newFnKey("F12", "l-f-10-9"),

    new KeymapKey({
      id: "l-f-22-13",
      ...keyLegends.menu,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    // #endregion Left Finger Grid (l-f)

    // #region Right Finger Grid (r-f)
    new KeymapKey({
      name: "Numpad Num",
      id: "r-f-9-1",
      textLegend: "Num",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad /",
      id: "r-f-13-1",
      textLegend: "/",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad *",
      id: "r-f-17-1",
      textLegend: "*",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad -",
      id: "r-f-21-1",
      textLegend: "-",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      id: "r-f-25-1",
      ...keyLegends.printScreen,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    new KeymapKey({
      name: "Numpad 7",
      id: "r-f-9-5",
      textLegend: "7",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 8",
      id: "r-f-13-5",
      textLegend: "8",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 9",
      id: "r-f-17-5",
      textLegend: "9",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad +",
      id: "r-f-21-5",
      textLegend: "+",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      id: "r-f-25-5",
      ...keyLegends.scrollLock,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    new KeymapKey({
      name: "Numpad 4",
      id: "r-f-9-9",
      textLegend: "4",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 5",
      id: "r-f-13-9",
      textLegend: "5",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 6",
      id: "r-f-17-9",
      textLegend: "6",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Pause/Break",
      id: "r-f-25-9",
      textLegend: "Pause",
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    new KeymapKey({
      name: "Numpad 1",
      id: "r-f-9-13",
      textLegend: "1",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 2",
      id: "r-f-13-13",
      textLegend: "2",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad 3",
      id: "r-f-17-13",
      textLegend: "3",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      id: "r-f-25-13",
      ...keyLegends.insert,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    new KeymapKey({
      name: "Numpad 0",
      id: "r-f-13-17",
      textLegend: "0",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "Numpad .",
      id: "r-f-17-17",
      textLegend: ".",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    // #endregion Right Finger Grid (r-f)

    // #region Right Thumb Grid (r-t)
    new KeymapKey({
      name: "Numpad Enter",
      id: "r-t-5-5",
      textLegend: "Enter",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    // #endregion Right Thumb Grid (r-t)

    // #region Transparent keys
    ...transparentLeftFingerMods,
    ...transparentLeftThumbkeys,
    ...transparentRightFingerMods,
    ...transparentRightThumbkeys.filter((key) => key.id !== "r-t-5-5"),
    // #endregion Transparent keys
  ],
});