import { render } from "satoru-render";

const html = `
  <div style="padding: 40px; background: #f8f9fa; border-radius: 12px; border: 2px solid #dee2e6;">
    <h1 style="color: #007bff; font-family: sans-serif;">Hello Satoru!</h1>
    <p style="color: #495057;">This document was rendered entirely in WebAssembly.</p>
  </div>
`;

// Render to PNG
const png = await render({
  value: html,
  width: 600,
  format: "png",
});

const pdf = await render({
  value: html,
  width: 800,
  format: "pdf",
  baseUrl: "https://example.com/assets/",
  resolveResource: async (resource, defaultResolver) => {
    // 1. Open Cache storage
    const cache = await caches.open("satoru-resource-cache");
    const cachedResponse = await cache.match(resource.url);

    // 2. Return cached data if available
    if (cachedResponse) {
      const buf = await cachedResponse.arrayBuffer();
      return new Uint8Array(buf);
    }

    // 3. Fetch using default resolver and save to cache
    const data = await defaultResolver(resource);
    if (data?.length) {
      await cache.put(resource.url, new Response(data));
    }

    return data;
  },
});

const png = await render({
  value: html,
  width: 800,
  format: "png",
  resolveResource: async (resource, defaultResolver) => {
    // Intercept external images to avoid CORS issues
    if (resource.type === "image" && !resource.url.startsWith("data:")) {
      const proxyUrl = `https://your-proxy-service.com/?url=${encodeURIComponent(resource.url)}`;
      try {
        const resp = await fetch(proxyUrl);
        if (resp.ok) {
          const buf = await resp.arrayBuffer();
          return new Uint8Array(buf);
        }
      } catch (e) {
        console.warn(`Failed to fetch via proxy: ${resource.url}`, e);
      }
    }

    // Fallback to default resolver for other resources
    return defaultResolver(resource);
  },
});

const pdf = await render({
  value: ["<h1>Page One</h1>", "<h1>Page Two</h1>", "<h1>Page Three</h1>"],
  width: 595, // A4 width in points
  format: "pdf",
});

import { render } from "satoru-render";

export default {
  async fetch(request) {
    const png = await render({
      value: "<h1>Edge Generated Image</h1>",
      width: 800,
      format: "png",
    });

    return new Response(png, { headers: { "Content-Type": "image/png" } });
  },
};

import { createSatoruWorker } from "satoru-render/workers";

const satoru = createSatoruWorker({ maxParallel: 4 });

const png = await satoru.render({
  value: "<h1>Parallel Task</h1>",
  width: 800,
  format: "png",
});

import { render } from "satoru-render";
import { getHtml } from "satoru-render/jsdom";

// 1. Let JSDOM fetch the URL, execute scripts, and wait for network/hydration
const hydratedHtml = await getHtml({
  src: "https://example.com/",
  waitUntil: "networkidle", // Wait until Next.js finishes loading chunks
  beforeParse: (window) => {
    // Provide polyfills if the target site requires them
    window.matchMedia = () => ({ matches: false, addListener: () => {} });
    window.IntersectionObserver = class {
      observe() {}
      unobserve() {}
      disconnect() {}
    };
  },
});

// 2. Render the fully constructed DOM in Satoru (at native speed)
const pngBytes = await render({
  value: hydratedHtml,
  baseUrl: "https://example.com/",
  width: 1200,
  format: "png",
});

import { Satoru } from "satoru-render";
import createSatoruModule from "satoru-render/satoru.js";

const satoru = await Satoru.create(createSatoruModule);
const element = document.getElementById("target-element");

// 1. Capture to HTMLCanvasElement (Direct html2canvas replacement)
const canvas = await satoru.capture(element, {
  format: "png",
});
document.body.appendChild(canvas);

// 2. Or render directly to binary (Uint8Array)
const png = await satoru.render({
  value: element, // Accepts HTMLElement directly
  width: 800,
  format: "png",
});