import {
  renderReportBody,
  renderReportHtml,
  REPORT_CSS,
} from "/shared/report.js?v=__ASSET_VERSION__";
export function initPrint({ getPlan, getName }) {
  const style = document.createElement("style");
  style.textContent =
    REPORT_CSS +
    "\n#report-print{display:none}@media print{body>*:not(#report-print){display:none!important}#report-print{display:block!important}}";
  document.head.append(style);
  const mount = document.createElement("div");
  mount.id = "report-print";
  document.body.append(mount);
  window.addEventListener("beforeprint", () => {
    mount.innerHTML = renderReportBody(getPlan(), getName());
  });
  window.addEventListener("afterprint", () => mount.replaceChildren());
  const print = document.getElementById("btn-print");
  print.addEventListener("click", () => window.print());
  const download = document.createElement("button");
  download.type = "button";
  download.className = "ghost-btn";
  download.textContent = "Download HTML";
  download.addEventListener("click", () => {
    const url = URL.createObjectURL(
      new Blob([renderReportHtml(getPlan(), getName())], {
        type: "text/html;charset=utf-8",
      }),
    );
    const a = document.createElement("a");
    a.href = url;
    a.download =
      (getName() || getPlan().fields?.["0.1"] || "roast-plan").replace(
        /[^a-z0-9_-]+/gi,
        "-",
      ) + ".html";
    document.body.append(a);
    a.click();
    a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  });
  (document.getElementById("report-actions") || print.parentElement).append(download);
  const preview = document.createElement("button");
  preview.type = "button";
  preview.className = "ghost-btn";
  preview.textContent = "Preview report";
  download.after(preview);
  const dialog = document.createElement("dialog");
  dialog.style.cssText =
    "width: min(1000px,96vw);height:90vh;padding:12px;border:1px solid #ccc;border-radius:12px";
  const close = document.createElement("button");
  close.type = "button";
  close.textContent = "Close preview";
  close.addEventListener("click", () => dialog.close());
  const frame = document.createElement("iframe");
  frame.title = "Printable roast report";
  frame.setAttribute("sandbox", "");
  frame.style.cssText = "width:100%;height:calc(100% - 40px);border:0";
  dialog.append(close, frame);
  document.body.append(dialog);
  preview.addEventListener("click", () => {
    frame.srcdoc = renderReportHtml(getPlan(), getName());
    dialog.showModal();
  });
}