Confirm dialog

import { useState } from "react";
import { Button, ConfirmDialog, confirm } from "@arcadia/ui";

function Async() {
  const [open, setOpen] = useState(false);
  const save = () => new Promise((resolve, reject) => {
    const fail = () => reject(new Error("409: someone else is editing this project."));
    setTimeout(Math.random() < 0.5 ? resolve : fail, 1200);
  });
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Archive project</Button>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title="Archive “Acme web”?"
        description="It leaves the sidebar; you can restore it from Settings."
        confirmLabel="Archive"
        onConfirm={save}
      />
    </>
  );
}

const STATES: { caption: string; props: Omit<ConfirmDialogProps, "open" | "container"> }[] = [
  { caption: "Default: focus starts on the action", props: { title: "Discard the draft?", description: "The unsent message in this chat is cleared.", confirmLabel: "Discard" } },
  { caption: "Danger: focus starts on Cancel", props: DELETE },
  { caption: "Loading: closing is blocked", props: { title: "Archive “Acme web”?", description: "It leaves the sidebar; you can restore it from Settings.", confirmLabel: "Archive", loading: true } },
  { caption: "Failed: the message stays", props: { ...DELETE, title: "Delete the project?", description: "Its chats move to the archive.", error: "409: someone else is editing this project." } },
];

function Open({ container, ...props }: Omit<ConfirmDialogProps, "open" | "container"> & { container: HTMLElement }) {
  return <ConfirmDialog open modal={false} initialFocus={false} container={container} {...props} />;
}

export default function ConfirmDialogPage() {
  return (
    <>
      <Specimen
        code={SRC.Imperative}
        surface="pane"
        size="tall"
        stage={(c) => <Open container={c} {...DELETE} />}
      >
        <Imperative />
      </Specimen>
      <Section title="Usage">
        <CodeBlock code={displaySnippet(SRC.Usage)} />
        <P>
          {"`confirm()` resolves `true` on confirm and `false` on cancel or Esc. Requests queue, one dialog at a time, and render through one `<ConfirmHost/>` mounted at the app root; without it, `confirm()` rejects. Say what happens on the button (\"Delete\", \"Discard\"), never \"OK\"."}
        </P>
        <P>
          Confirm, Dialog or Tray? Confirm only to stop something that can't be undone. A <a href="/design/components/dialog">Dialog</a> is
          for a task with its own controls. A question the product asks during work belongs in
          a <a href="/design/components/tray">Tray</a> docked to the composer, where it doesn't block the page.
        </P>
      </Section>
      <Section title="Examples">
        <Sub title="Async confirm" lead="Return a promise from `onConfirm`: the button shows its loading state and closing is blocked; a rejection keeps the dialog open with its message. This one fails half the time.">
          <Specimen code={SRC.Async} size="compact"><Async /></Specimen>
        </Sub>
        <Sub title="States" lead="Rendered open in place, set down in their frames.">
          <Specimen surface="pane" cols={2}>
            {STATES.map((s) => (
              <Cell key={s.caption} caption={s.caption} height={space(13)} stage={(c) => <Open container={c} {...s.props} />} />
            ))}
          </Specimen>
        </Sub>
      </Section>
    </>
  );
}

export function Notes() {
  return (
    <Section title="Accessibility">
      <P>
        An `alertdialog`, named by its title and described by its description, that ignores clicks outside. Initial focus
        lands on Cancel for `danger` and on the confirm button otherwise, so a stray Enter never deletes anything. Focus
        returns to the button that asked.
      </P>
      <Keys rows={[["Enter", "Confirms, unless focus is on another button"], ["Esc", "Cancels"], ["Tab", "Moves between Cancel and the action"]]} />
    </Section>
  );
}