import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { ArchiveRepairWidget } from "../../src/widgets/ArchiveRepairWidget";
import "../../src/index.css";

function Preview() {
  const [step, setStep] = useState(0);
  const [responses, setResponses] = useState<unknown[]>([]);
  return <main className="mx-auto max-w-4xl p-4"><ArchiveRepairWidget key={step} descriptor={{
    id: `repair-${step}`, widget: "archive-repair", reserved: [], repair: {
      repair_id: "fixture", reason: "Memory defines an order by its number alone. Evidence requires the financial year too. Choose which shared definition to correct.",
      can_apply: true, choice: step ? "e" : null, saved: step > 0, indexed: step > 1,
      status: ["proposed", "pending_activation", "active"][Math.min(step, 2)], options: [
        { id: "m", label: "Include the financial year in Memory", archive: "memory", target_id: "mem-order-key",
          before: { subject: "Order identity", detail: "Use the order number.", scope: "Sales" },
          content: { subject: "Order identity", detail: "Use order number and financial year.", scope: "Sales" } },
        { id: "e", label: "Correct Evidence to use the order number", archive: "evidence", target_id: "evidence:order-key",
          before: { title: "Order key", payload: { rule: "Use order number and financial year." } },
          content: { title: "Order key", payload: { rule: "Use the order number." },
            provenance: { kind: "manual", declared_by: "Sales curator" } } },
      ],
    },
  }} onRespond={response => { setResponses([...responses, response]); setStep(step + 1); }} />
    <output id="response" className="sr-only">{JSON.stringify(responses)}</output></main>;
}
createRoot(document.getElementById("root")!).render(<Preview />);