import puppeteer, { ConsoleMessage } from "puppeteer";
import { toHtml } from "tsx-to-html";
import * as Fs from "node:fs";

const lib = Fs.readFileSync("dist/index.js", "utf8");
const css = Fs.readFileSync("dist/index.css", "utf8");
const browser = await puppeteer.launch({ headless: true });

export const init = async (content: JSX.Element) => {
  const consoleMessages = [] as ConsoleMessage[];
  const page = Object.assign(await browser.newPage(), {
    console: { messages: consoleMessages },
  });

  page.on("console", async (msg) => {
    consoleMessages.push(msg);
    const args = await Promise.all(msg.args().map((a) => a.jsonValue()));
    console.log(...args);
  });

  page.on("pageerror", console.error);

  await page.setContent(
    toHtml(
      <html>
        <head>
          <script type="module">{lib}</script>
          <style>{css}</style>
        </head>
        <body>{content}</body>
      </html>,
    ),
  );

  return page;
};
