/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />

export interface Link {
  before: string;
  after: string;
}
export type ConvertOrder = {
  convert: false;
} | {
  convert: true;
  links: Link[];
};

export const waitForConvertOrder = (links: string[]): Promise<ConvertOrder> => {
  const root = document.createElement("div");
  const shadowRoot = root.attachShadow({ mode: "open" });
  
  const style = document.createElement("style");
  style.textContent = `dialog::backdrop{background-color:#000c}dialog{flex-direction:column;align-items:center;row-gap:10px;padding:10px;background:unset;margin-top:unset;margin-bottom:unset;border:unset;height:unset}dialog[open]{display:flex}dialog>*{color:var(--page-text-color, #4a4a4a);background-color:var(--dropdown-menu-bg, #fff);border:1px solid rgba(0,0,0,.2);border-radius:6px}@media (min-width: 768px){dialog{padding:30px 0}}.container{display:flex;padding:5px;gap:0.2em;flex-direction:column;width:100%;}.button-container{flex-direction:unset;}.button-container>*{flex:1;}`;
  shadowRoot.append(style);
  const dialog = document.createElement("dialog");
  dialog.insertAdjacentHTML("beforeend", `
    <div class="container">
      Replace Links:
      <textarea class="editor"></textarea>
      <div class="container button-container">
        <button class="cancel">cancel</button>
        <button class="replace">replace</button>
      </div>
    </div>
  `);
  shadowRoot.append(dialog);
  
  const editor = dialog.querySelector(".editor") as HTMLTextAreaElement;
  editor.rows = links.length;
  editor.value = links.join("\n");
  const adjustWidth = () => {
    dialog.style.minWidth = `${
      Math.max(...editor.value.split("\n").map((line) => [...line].length)) + 6
    }em`;
  };
  adjustWidth();
  editor.addEventListener("input", adjustWidth);
  
  const cancel = dialog.querySelector(".cancel") as HTMLButtonElement;
  const confirm = dialog.querySelector(".replace") as HTMLButtonElement;
  const promise = new Promise<ConvertOrder>((resolve) => {
    const onClose = () => {
      resolve({ convert: false });
      root.remove();
    };
    dialog.addEventListener("close", onClose);
    dialog.addEventListener("click", onClose);
    cancel.addEventListener("click", onClose);
    confirm.addEventListener("click", () => {
      const newLines = editor.value.split("\n");
      resolve({
        convert: true,
        links: links.flatMap(
          (before, i) => {
            // 空文字の場合と、変化がない場合は飛ばす
            if (before === newLines[i] || before === "" || !newLines[i]) return [];
            return [{ before, after: newLines[i] ?? before }];
          }
        ),
      });
      root.remove();
    });
    dialog.querySelector(".container")!.addEventListener("click", (e) => {
      e.stopPropagation();
    });
  });
  
  document.body.append(root);
  dialog.showModal();
  
  return promise;
};