Operation

"use client";
import * as React from "react";
import { Button } from "@/components/ui/notchset/button";
import { CompanyMark } from "@/components/ui/notchset/company-mark";
import { opError, OpStatus, useOperation } from "@/components/ui/notchset/operation";
import { SegmentedControl } from "@/components/ui/notchset/segmented-control";

/* the demo's server: answers after a beat, or drops, or refuses; a real app passes its adapter's verb */
type Server = "answers" | "offline" | "refuses";
const wait = (ms: number, signal: AbortSignal) => new Promise<void>((done, stop) => {
  const t = setTimeout(done, ms);
  signal.addEventListener("abort", () => (clearTimeout(t), stop(signal.reason)), { once: true });
});

const STRIPE = "M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z";
const money = (n: number) => `$${n.toLocaleString("en-US")}`;

export default function OperationDemo() {
  const [server, setServer] = React.useState<Server>("offline");
  const [value, setValue] = React.useState(148_000);
  const save = useOperation(
    async (next: number, signal) => {
      await wait(900, signal);
      if (server === "offline") throw new TypeError("Failed to fetch");
      if (server === "refuses") throw opError("permission", "Your role can't change a deal's value.");
      return { id: "deal_42", value: next };
    },
    /* the stored record comes back; the page adopts it */
    { key: "demo:deal_42:value", onDone: (deal) => setValue(deal.value) },
  );
  /* the field keeps what you typed while it saves and after a refusal (the draft), until Undo */
  const shown = save.state === "pending" || save.state === "failed" ? (save.draft ?? value) : value;
  return (
    <div className="flex w-full max-w-[420px] flex-col gap-4">
      <SegmentedControl<Server>
        size="sm"
        label="The server"
        value={server}
        onValueChange={setServer}
        options={[
          { value: "answers", label: "Answers" },
          { value: "offline", label: "Offline" },
          { value: "refuses", label: "Refuses" },
        ]}
      />
      <div className="flex flex-col gap-2.5 rounded-[var(--ns-radius-lg)] bg-[var(--ns-panel)] p-3.5 shadow-[0_0_0_1px_var(--ns-line)]">
        <div className="flex items-center gap-2.5">
          <CompanyMark name="Stripe" color="#635bff" glyph={STRIPE} size={22} />
          <b className="flex-1 font-[number:var(--ns-weight-strong)]">Platform renewal</b>
        </div>
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <span className="w-16 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Value</span>
          <span className={save.state === "failed" ? "rounded-[6px] px-1.5 text-[var(--ns-bad-ink)] tabular-nums shadow-[inset_0_0_0_1px_var(--ns-bad)]" : "px-1.5 tabular-nums"}>{money(shown)}</span>
          <OpStatus op={save} was={`Was ${money(value)}.`} onUndo={save.reset} />
        </div>
      </div>
      <div className="flex gap-2">
        <Button size="sm" disabled={save.pending} onClick={() => void save.run(shown + 16_000)}>
          Raise by $16,000
        </Button>
      </div>
    </div>
  );
}