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 { data } = useCheckinCode(eventId);
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button className="w-20">签到</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>QR Code</DialogTitle>
          <DialogDescription>
            请工作人员扫描下面的二维码为你签到。
          </DialogDescription>
        </DialogHeader>
        <QrDialogContent checkinCode={data.data.checkin_code} />
      </DialogContent>
    </Dialog>
  );
}

function QrDialogContent({ checkinCode }: { checkinCode: string }) {
  return (
    <>
      <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
        <QRCode data={checkinCode} 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">
          {checkinCode}
        </div>
      </DialogFooter>
    </>
  );
}
