const COMMANDS = [
  {
    name: "Topic",
    description: "Find out what is happening on the stream.",
    aliases: ["!whatbrodoing"],
  },
  {
    name: "Lurk",
    description:
      "Let chat know you are here, but lurking. We support our fellow lurkers.",
    aliases: ["!lurk"],
  },
  {
    name: "Schedule",
    description: "Get my stream schedule.",
    aliases: ["!schedule"],
  },
  {
    name: "Lofi Generator",
    description: "Get the link to the website that I use for my stream music.",
    aliases: ["!lofi", "!music"],
  },
  {
    name: "ZoomIt",
    description: "Get the link to the tool I use to draw on my screen.",
    aliases: ["!zoomit"],
  },
  {
    name: "Neovim",
    description: "Get the link to my Neovim configs.",
    aliases: ["!nvim", "!neovim"],
  },
  {
    name: "My Font",
    description: "Get the link to the NerdFont I use.",
    aliases: ["!font", "!nerdfont"],
  },
  {
    name: "PowerShell",
    description: "Get the link to my PowerShell profile.",
    aliases: ["!pwsh", "!powershell"],
  },
  {
    name: "Oh My Posh",
    description: "Get the link to my Oh My Posh configs.",
    aliases: ["!omp", "!ohmyposh"],
  },
  {
    name: "Member",
    description: "Get a link to become a member of the YouTube channel.",
    aliases: ["!member"],
  },
  {
    name: "Links",
    description: "Get a link to all my links.",
    aliases: ["!links"],
  },
  {
    name: "Blog",
    description: "Get the link to my blog.",
    aliases: ["!blog"],
  },
  {
    name: "Bluesky",
    description: "Get the link to my Bluesky profile.",
    aliases: ["!bsky", "!bluesky"],
  },
  {
    name: "Bottom",
    description: "Get the link to the terminal monitor I use.",
    aliases: ["!btm", "!bottom"],
  },
  {
    name: "Discord",
    description: "Want to chat off stream? Get the invite link to my discord.",
    aliases: ["!discord"],
  },
  {
    name: "GitHub",
    description: "Get the link to my GitHub profile.",
    aliases: ["!gh", "!github"],
  },
  {
    name: "Tangled",
    description: "Get the link to my Tangled profile.",
    aliases: ["!tangled"],
  },
  {
    name: "LinkedIn",
    description: "Get the link to my LinkedIn profile.",
    aliases: ["!li", "!linkedin"],
  },
  {
    name: "Telegram",
    description: "Get the invite link to my Telegram channel.",
    aliases: ["!tg", "!telegram"],
  },
  {
    name: "Twitch",
    description: "Get the link to my Twitch channel.",
    aliases: ["!ttv", "!twitch"],
  },
  {
    name: "YouTube",
    description: "Get the link to my YouTube channel.",
    aliases: ["!yt", "!youtube"],
  },
  {
    name: "Commands",
    description:
      "Get the link to the list of commands available in chat during a stream.",
    aliases: ["!help", "!commands"],
  },
];

document.addEventListener("DOMContentLoaded", handleContentLoaded);

function handleContentLoaded() {
  const commandsList = document.getElementById("commandsList");

  if (commandsList === null) {
    return;
  }

  for (const command of COMMANDS) {
    commandsList.appendChild(CommandListItem(command));
  }

  commandsList.addEventListener("click", handleCopyButtonClick);
}

function CommandListItem(command) {
  const listItemElement = document.createElement("li");
  listItemElement.innerHTML = /*html*/ `
    <div class="command-card">
      <div class="left">
        <div class="name">${command.name}</div>
      </div>
      <div class="right">
        <div class="aliases">
        ${command.aliases
          .map((a) => /*html*/ `
            <div class="command-alias">
              <code>${a}
                <button 
                  type="button" 
                  class="copy-button"
                  aria-label="Copy"
                  data-alias="${a}"
                >
                  <i class="fa-solid fa-copy"></i>
                  <i class="fa-solid fa-check"></i>
                </button>
              </code>
            </div>
          `,
          )
          .join("")}
        </div>
        <p>${command.description}</p>
      </div>
    </div>
  `;

  return listItemElement;
}

async function handleCopyButtonClick(e) {
  const button = e.target.closest(".copy-button");

  if (!button || !button.dataset.alias || button.classList.contains("copied")) {
    return;
  }

  try {
    await navigator.clipboard.writeText(button.dataset.alias);

    button.classList.add("copied");

    setTimeout(() => {
      button.classList.remove("copied");
    }, 1000);
  } catch (err) {
    const permissionStatus = await navigator.permissions.query({
      name: "clipboard-write",
    });

    alert(
      `Failed to copy command to clipboard. This is most often caused my a permission issue. Current clipboard write permission state is ${permissionStatus.state}`,
    );
  }
}
