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`,
    `Select a key from the board above to learn more about it.`,
  ],
  layerEntryKeys: ["r-t-1-5"], // The layer selection key
  keys: [
    // #region Left Finger Grid (l-f)
    new KeymapKey({
      id: "l-f-1-1",
      ...keyLegends.numLock,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    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"),

    new KeymapKey({
      id: "l-f-1-5",
      ...keyLegends.scrollLock,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    newFnKey("F11", "l-f-6-5"),
    newFnKey("F12", "l-f-10-5"),
    newFnKey("F13", "l-f-14-5"),
    newFnKey("F14", "l-f-18-5"),
    newFnKey("F15", "l-f-22-5"),

    new KeymapKey({
      id: "l-f-1-9",
      ...keyLegends.capsLock,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    new KeymapKey({
      id: "l-f-6-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-10-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-14-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-18-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-22-9",
      name: "",
      unset: true,
      info: [],
    }),

    new KeymapKey({ id: "l-f-1-13", name: "", unset: true, info: [] }),
    new KeymapKey({
      id: "l-f-6-13",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-10-13",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-14-13",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "l-f-18-13",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({ name: "", id: "l-f-22-13", unset: true, info: [] }),

    new KeymapKey({ name: "", id: "l-f-1-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "l-f-6-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "l-f-10-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "l-f-14-17", unset: true, info: [] }),
    // #endregion Left Finger Grid (l-f)

    // #region Right Finger Grid (r-f)
    newFnKey("F6", "r-f-5-1"),
    newFnKey("F7", "r-f-9-1"),
    newFnKey("F8", "r-f-13-1"),
    newFnKey("F9", "r-f-17-1"),
    newFnKey("F10", "r-f-21-1"),
    new KeymapKey({
      id: "r-f-25-1",
      ...keyLegends.sysrq,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    newFnKey("F16", "r-f-5-5"),
    newFnKey("F17", "r-f-9-5"),
    newFnKey("F18", "r-f-13-5"),
    newFnKey("F19", "r-f-17-5"),
    newFnKey("F20", "r-f-21-5"),
    new KeymapKey({
      id: "r-f-25-5",
      ...keyLegends.insert,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),

    new KeymapKey({
      id: "r-f-5-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "r-f-9-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "r-f-13-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({
      id: "r-f-17-9",
      name: "",
      unset: true,
      info: [],
    }),
    new KeymapKey({ name: "", id: "r-f-21-9", unset: true, info: [] }),
    new KeymapKey({
      id: "r-f-25-9",
      ...keyLegends.menu,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    new KeymapKey({ name: "", id: "r-f-5-13", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-9-13", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-13-13", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-17-13", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-21-13", unset: true, info: [] }),
    new KeymapKey({
      id: "r-f-25-13",
      ...keyLegends.printScreen,
      info: keyInfo.sysCtrls,
      selection: keySelection.sysCtrls,
    }),
    new KeymapKey({ name: "", id: "r-f-13-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-17-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-21-17", unset: true, info: [] }),
    new KeymapKey({ name: "", id: "r-f-25-17", unset: true, info: [] }),
    // #endregion Right Finger Grid (r-f)

    // #region Transparent keys
    ...transparentLeftFingerMods,
    ...transparentLeftThumbkeys,
    ...transparentRightFingerMods,
    ...transparentRightThumbkeys,
    // #endregion Transparent keys
  ],
});