import { marked } from "marked";

export interface PanelView {
  set(text: string): void;
  raw(): string;
}

/// Verkabelt einen Panel-Inhaltsbereich: MD/Roh-Umschalter und Copy-Button.
/// Der Rohtext bleibt die Quelle für „Kopieren"; die Ansicht rendert Markdown.
export function initPanelView(opts: {
  content: HTMLElement;
  copyBtn: HTMLElement;
  modeBtn: HTMLElement;
}): PanelView {
  let rawText = "";
  let rendered = true;

  function draw() {
    if (rendered) {
      opts.content.className = "md";
      opts.content.innerHTML = marked.parse(rawText, { async: false });
    } else {
      opts.content.className = "raw";
      opts.content.textContent = rawText;
    }
    opts.modeBtn.textContent = rendered ? "MD" : "Roh";
  }

  opts.modeBtn.addEventListener("click", () => {
    rendered = !rendered;
    draw();
  });

  opts.copyBtn.addEventListener("click", async () => {
    await navigator.clipboard.writeText(rawText);
    opts.copyBtn.classList.add("copied");
    const label = opts.copyBtn.textContent;
    opts.copyBtn.textContent = "Kopiert";
    setTimeout(() => {
      opts.copyBtn.classList.remove("copied");
      opts.copyBtn.textContent = label;
    }, 1200);
  });

  draw();
  return {
    set(text: string) {
      rawText = text;
      draw();
    },
    raw: () => rawText,
  };
}