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

const synergyKeys = {
  selection: ["l-f-6-9", "l-f-10-9", "l-f-14-9", "l-f-18-9"],
  info: [
    `These keys are used to swap my keyboard/mouse input between <a href="https://symless.com/synergy">Synergy</a> clients.`,
  ],
};

function newSynergyKey(num: number, target: string) {
  return {
    name: `Synergy ${num}`,
    selection: synergyKeys.selection,
    htmlLegend: `<div style="border: 1px solid currentColor; padding: 0 2px; border-radius: 4px; height: 1rem; width: 1rem; text-align: center; line-height: 1rem;">${num}</div>`,
    info: [...synergyKeys.info, `This key selects ${target}.`],
  };
}

// Show all transparent keys, EXCEPT:
// - Right opt, which is used for the numpad zero key on this layer.
// - The layer selection key itself
const excludedTransparentKeys = [
  "r-f-9-17", // Numpad zero key
  "l-t-9-5", // Layer selection key
];
const transparentSelectionExceptAFew = transparentSelection.filter(
  (id) => excludedTransparentKeys.indexOf(id) === -1,
);
const transparentAllExceptAFew: KeymapKey[] = [
  ...transparentLeftFingerMods,
  ...transparentLeftThumbkeys,
  ...transparentRightFingerMods,
  ...transparentRightThumbkeys,
]
  .filter((key) => excludedTransparentKeys.indexOf(key.id) === -1)
  .map((key) => {
    return {
      ...key,
      selection: transparentSelectionExceptAFew,
      info: key.info,
    };
  });
// Now add the layer selection key
transparentAllExceptAFew.push(
  new KeymapKey({
    id: "l-t-9-5",
    ...keyLegends.keypadLayer,
    info: ["The key to enter this layer."],
  }),
);

export const layer1kp = KeymapLayer.fromKeyList({
  displayName: "Keypad Layer",
  shortName: "Keypad",
  welcome: [
    `The keypad layer.`,
    `This layer is designed to be used with the right hand. The left hand holds down the "Keypad" key on the base layer to activate it, leaving the right hand free to use the number pad without moving.`,
    `However, this leaves room for some application-specific keys on the left hand too, as long as they aren't hit very frequently.`,
    `Select a key from the board above to learn more about it.`,
  ],
  layerEntryKeys: ["l-t-9-5"],
  keys: [
    // #region Left Finger Grid (l-f)
    new KeymapKey({ name: "", id: "l-f-1-1", info: [""] }),
    new KeymapKey({ name: "", id: "l-f-6-1", info: [""] }),
    new KeymapKey({ name: "", id: "l-f-10-1", info: [""] }),
    new KeymapKey({ name: "", id: "l-f-14-1", info: [""] }),
    new KeymapKey({ name: "", id: "l-f-18-1", info: [""] }),
    new KeymapKey({ name: "", id: "l-f-22-1", info: [""] }),

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

    new KeymapKey({ name: "", id: "l-f-1-9", info: [""] }),
    new KeymapKey({ id: "l-f-6-9", ...newSynergyKey(1, "my work laptop") }),
    new KeymapKey({ id: "l-f-10-9", ...newSynergyKey(2, "my gaming PC") }),
    new KeymapKey({
      id: "l-f-14-9",
      ...newSynergyKey(3, "my personal workstation"),
    }),
    new KeymapKey({
      id: "l-f-18-9",
      ...newSynergyKey(4, "my personal laptop (rarely connected)"),
    }),
    new KeymapKey({ name: "", id: "l-f-22-9", info: [""] }),

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

    // #region Right Finger Grid (r-f)
    new KeymapKey({ name: "", id: "r-f-5-1", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-9-1", info: [""] }),
    new KeymapKey({
      name: "/",
      id: "r-f-13-1",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "*",
      id: "r-f-17-1",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "-",
      id: "r-f-21-1",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-25-1", info: [""] }),

    new KeymapKey({ name: "", id: "r-f-5-5", info: [""] }),
    new KeymapKey({
      name: "7",
      id: "r-f-9-5",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "8",
      id: "r-f-13-5",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "9",
      id: "r-f-17-5",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "+",
      id: "r-f-21-5",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-25-5", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-5-9", info: [] }),
    new KeymapKey({
      name: "4",
      id: "r-f-9-9",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "5",
      id: "r-f-13-9",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "6",
      id: "r-f-17-9",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-21-9", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-25-9", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-5-13", info: [] }),
    new KeymapKey({
      name: "1",
      id: "r-f-9-13",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "2",
      id: "r-f-13-13",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({
      name: "3",
      id: "r-f-17-13",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-21-13", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-25-13", info: [""] }),
    new KeymapKey({
      name: "0",
      id: "r-f-9-17",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-13-17", info: [""] }),
    new KeymapKey({
      name: ".",
      id: "r-f-17-17",
      info: keyInfo.numpad,
      selection: keySelection.numpad,
    }),
    new KeymapKey({ name: "", id: "r-f-21-17", info: [""] }),
    new KeymapKey({ name: "", id: "r-f-25-17", info: [""] }),
    // #endregion Right Finger Grid (r-f)

    // #region Transparent keys
    ...transparentAllExceptAFew,
    // #endregion Transparent keys
  ],
});