import { defineRenderers, type HeaderContext } from "@berry/api/web.ts";
import { recoverClosed } from "./drafts.ts";
import type { Event } from "./edit-types.ts";
import { diffView } from "./view.tsx";
import "./web.css";

export default defineRenderers<Event>({
  view: { label: "diff", create: diffView },
  header() {
    const element = document.createElement("span");
    let context: HeaderContext;
    let tid: string | null = null;
    let disposed = false;
    async function retry() {
      element.replaceChildren();
      try {
        await recoverClosed(context);
      } catch {
        if (disposed) return;
        element.append(
          <button type="button" _onclick={() => void retry()}>retry edit report</button>,
        );
      }
    }
    return {
      element,
      update(next) {
        context = next;
        if (tid !== next.tid) {
          tid = next.tid;
          void retry();
        }
      },
      dispose() {
        disposed = true;
      },
    };
  },
  event(event) {
    if (event.type === "saved" || !event.paths.length) return null;
    return (
      <p class="diff-edit-report">
        Human edits saved: {event.paths.join(", ")}. Available as context for the next turn.
      </p>
    );
  },
});