import { KeymapGuide } from "@keymapkit/ui";
import { keySelection } from "./keySelection";
import { layer4nav } from "./layer4nav";
import { layer1kp } from "./layer1kp";
import { layer3mod } from "./layer3mod";
import { layer2fn } from "./layer2fn";

// prettier-ignore
const pinkyReliefSelection = [
  "l-f-26-1", "l-f-26-5", "l-t-1-5", "l-t-9-9",
  "r-f-1-1",  "r-t-1-9",  "r-t-5-5"
];
// prettier-ignore
const movedQwertyNonReliefSelection = [
  "l-f-1-1", "l-f-1-5",   "l-f-1-13", "l-f-26-9", "l-f-18-17",
  "r-f-1-9", "r-f-25-13", "r-f-9-17",
];
// prettier-ignore
const extraFeaturesSelection = [
  "l-f-1-9",   "l-f-10-17", "l-f-14-17",
  "l-t-5-1",   "l-t-9-1",   "l-t-5-5",   "l-5-9-5",
  "r-f-13-17", "r-f-17-17", "r-f-21-17", "r-f-25-17",
  "r-t-1-1",   "r-t-5-1",   "r-t-1-5",
];

export const guide = new KeymapGuide({
  title: "Guide to Micah's Advantage360 layout",
  shortName: "Guide",
  id: "mrlguide",
  steps: [
    {
      title: "Welcome to the guide to my main keyboard layout",
      text: [
        `
              Keys highlighted in orange have been moved from their
              traditional QWERTY location to relieve pain.
            `,
        `
              You'll note that all of them are moved inward, such that
              they are within reach of either the index finger or the thumb.
              <strong>This is the biggest benefit of the keyboard for me.</strong>
            `,
        `
              I remapped all of these keys in order to relieve what became
              intense, painful strain on the pinky fingers of both hands. At
              its worst, the tendon on the outside of each forearm from
              pinky-side of the palm to the elbow would be swollen, rock hard,
              and painful to touch. Touching any keys with my pinkies would
              feel like tiny stabs of pain. It was miserable.
            `,
        `
              I am not the first to notice that these keys &mdash;
              <kbd>esc</kbd>, <kbd>tab</kbd>, <kbd>shift</kbd>,
              <kbd>backspace</kbd>, <kbd>ctrl</kbd>, and <kbd>return</kbd>
              &mdash; are some of the most commonly used keys on the board,
              and yet we use them with our pinkies, which are the weakest
              fingers we have. Changing the location of these keys has made a
              massive difference in my day to day life on a keyboard, and it
              was easy to learn.
            `,
        `Once I changed these keys, my pain decreased drastically.`,
      ],
      selection: pinkyReliefSelection,
    },
    {
      title: "QWERTY keys",
      text: [
        `
          While the most significant benefit of keyboards like the Advantage360 is the ability to remap keys to new positions,
          see how many keys remain in their default QWERTY position.
          The benefits I got were cheap. I could keep most of what I knew from regular keyboards.
        `,
        `
          Even for these QWERTY keys, though, there is something special about this key layout.
          The keys are <em>ortholinear</em>,
          which means that they are arrayed in neat columns rather than offset like a traditional QWERTY keyboard.
          This way, my fingers extend straight out, or curl straight in, to hit any key.
        `,
        `
              Additionally, you can see that the keyboard is actually two
              independent boards. They are connected by a flexible cable, and
              can be positioned straight in front of your arms. This helps
              keep correct posture and relaxed shoulders.
            `,
      ],
      selection: keySelection.qwerty,
    },
    {
      title: "Changing key locations to relieve my pinky",
      text: [
        `
              Here are the most important keys I moved again. This is just the
              same group of keys as on step one.
            `,
        `In the following steps, we will examine them individually.`,
      ],
      selection: pinkyReliefSelection,
    },
    { keyId: "l-f-26-1" },
    { keyId: "l-f-26-5" },
    { keyId: "l-t-1-5" },
    {
      keyId: "l-t-9-9",
      selection: keySelection.control,
    },
    { keyId: "r-f-1-1" },
    { keyId: "r-t-5-5" },
    {
      title: "Other remapped keys",
      text: [
        `Due to the layout of the keyboard, some keys had to be moved from their normal QWERTY positions.`,
        `
              Changing the location of these keys did not impact my RSI, but
              some of the new locations might be surprising, so it&apos;s
              worth examining what has changed and why.
            `,
      ],
      selection: movedQwertyNonReliefSelection,
    },
    { keyId: "l-f-1-1" },
    { keyId: "l-f-1-5" },
    {
      keyId: "r-f-25-13",
      selection: keySelection.brackets,
    },
    {
      keyId: "r-f-1-9",
      selection: keySelection.command,
    },
    {
      keyId: "r-f-9-17",
      selection: keySelection.option,
    },
    {
      title: "Layers and extra features",
      text: [
        `
              Since the board is powered by
              <a href="https://qmk.fm/">QMK</a>, I can also get extra
              features besides just moving keys around. See the next few steps
              of the guide for special keys and cool tricks.
            `,
      ],
      selection: extraFeaturesSelection,
    },
    { keyId: "l-f-1-9" },
    { keyId: "l-f-14-17" },
    { keyId: "l-t-5-1" },
    { keyId: "l-t-9-1" },
    { keyId: "l-t-5-5" },
    // { keyId: "l-t-5-5", layerId: 4, text: [`The Navigation Layer`] },
    { title: layer4nav.displayName, text: layer4nav.welcome, layerId: 4 },
    { keyId: "l-t-9-5" },
    { title: layer1kp.displayName, text: layer1kp.welcome, layerId: 4 },
    { keyId: "r-f-1-1" },
    { keyId: "r-f-13-17" },
    { keyId: "r-f-13-17", layerId: 3 },
    { title: layer3mod.displayName, text: layer3mod.welcome, layerId: 4 },
    { keyId: "r-f-21-17" },
    { keyId: "r-t-1-5" },
    { keyId: "r-t-1-5", layerId: 2 },
    { title: layer2fn.displayName, text: layer2fn.welcome, layerId: 4 },
    {
      title: "The end",
      text: [`Thanks for all the clicks.`],
    },
  ],
});