/// <reference no-default-lib="true" />
/// <reference lib="es2022" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

import {
  AlertMode,
  buildInButtons,
  Button,
  scrapboxAlert,
} from "https://scrapbox.io/api/code/Mijinko/input-dialog-userscript@1.0.1/scrapboxAlert.ts";

const buttons: { [K in string]: Button } = {
  ADD: {
    label: "追加",
    useInputForm: true,
    onClick: (from) => {
      return { button: "ADD", inputValue: from.InputValue };
    },
    className: "button-ADD",
  },
  DELETE: {
    label: "削除",
    useInputForm: true,
    onClick: (from) => {
      return { button: "DELETE", inputValue: from.InputValue };
    },
  },
};

const modes: { [K in string]: AlertMode } = {
  ADD_DELETE_CANCEL: {
    buttons: [buttons.ADD, buttons.DELETE, buildInButtons.CANCEL],
    priorityCancelButtonIndex: 2,
  },
};

export async function manageCSS() {
  const answer = await scrapboxAlert(
    modes.ADD_DELETE_CANCEL,
    "CSSのURLを入力してください",
  );
  if (answer.inputValue === undefined) return;
  switch (answer.button) {
    case "ADD":
      applyCSS(answer.inputValue);
      break;
    case "DELETE":
      removeCSS(answer.inputValue);
      break;
    default:
      break;
  }
}

function applyCSS(cssSrc: string) {
  const existLinks = document.head.getElementsByTagName("link");
  for (const el of existLinks) {
    if (el.getAttribute("href") == cssSrc) {
      return;
    }
  }

  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = cssSrc;
  document.head.appendChild(link);
}

function removeCSS(cssSrc: string) {
  const existLinks = document.head.getElementsByTagName("link");
  for (const el of existLinks) {
    if (el.getAttribute("href") == cssSrc) {
      el.remove();
    }
  }
}