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 { useCheckinCode } from '@/hooks/data/useGetCheckInCode';
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);
  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>
    </>
  );
}