import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { QRCode } from '@/components/ui/shadcn-io/qr-code';
import { Button } from '../ui/button';

export function QrDialog(
  { eventId }: { eventId: string },
) {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="w-20">签到</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>QR Code</DialogTitle>
          <DialogDescription>
            请工作人员扫描下面的二维码为你签到。
          </DialogDescription>
        </DialogHeader>
        <QrSection eventId={eventId} enabled={open} />
      </DialogContent>
    </Dialog>
  );
}

function QrSection({ eventId, enabled }: { eventId: string; enabled: boolean }) {
  // const { data } = useCheckinCode(eventId, enabled);
  const data = { data: { checkin_code: `dummy${eventId}${enabled}` } };
  return data
    ? (
        <>
          <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
            <QRCode data={data.data.checkin_code} className="size-60" />
          </div>
          <DialogFooter>
            <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
              {data.data.checkin_code}
            </div>
          </DialogFooter>
        </>
      )
    : (
        <QrSectionSkeleton />
      );
}

function QrSectionSkeleton() {
  return (
    <>
      <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
        <QRCode data="114514" className="size-60 blur-xs" />
      </div>
      <DialogFooter>
        <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
          Loading...
        </div>
      </DialogFooter>
    </>
  );
}