Dialog

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

export function InviteDialog() {
  const [keys, setKeys] = useState(true);
  const [busy, setBusy] = useState(false);
  const [open, setOpen] = useState(false);
  const [result, setResult] = useState("3 selected · 11 remain");
  return (
    <div className="grid justify-items-center gap-3">
      <Dialog open={open} onOpenChange={(next) => !busy && setOpen(next)}>
        <DialogTrigger asChild>
          <Button variant="secondary" className="text-danger">Remove 3 members</Button>
        </DialogTrigger>
        <DialogContent role="alertdialog">
          <DialogHeader>
            <DialogTitle>Remove 3 members from Halden Analytics?</DialogTitle>
            <DialogDescription>
              They lose access right away. Their dashboards and comments stay. Your bill drops by <span className="font-medium text-foreground tabular-nums">$18 per month</span> from 1 November.
            </DialogDescription>
          </DialogHeader>
          <ul className="grid gap-1 text-sm">
            <li>Tomás Ferreira</li>
            <li>Jun Lee</li>
            <li>Amara Bello</li>
          </ul>
          <label className="flex items-center gap-3 text-sm">
            <Checkbox checked={keys} onChange={(event) => setKeys(event.currentTarget.checked)} />
            Also revoke their 4 API keys
          </label>
          <DialogFooter>
            <DialogClose asChild><Button variant="secondary" disabled={busy}>Cancel</Button></DialogClose>
            <Button
              variant="destructive"
              loading={busy}
              onClick={() => {
                setBusy(true);
                window.setTimeout(() => {
                  setBusy(false);
                  setOpen(false);
                  setResult(`Removed Tomás Ferreira, Jun Lee and Amara Bello${keys ? " and revoked 4 API keys" : ""}.`);
                }, 900);
              }}
            >
              Remove 3 members
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <p role="status" className="max-w-sm text-center text-sm text-muted-foreground">{result}</p>
    </div>
  );
}