import type { EventInfo } from '../events/types';
import { isNil } from 'lodash-es';
import { useState } from 'react';
import { useCheckinCode } from '@/hooks/data/useCheckinCode';
import { Dialog } from '../ui/dialog';
import { CheckinQrDialogError } from './checkin-qr.dialog.error';
import { CheckinQrDialogSkeleton } from './checkin-qr.dialog.skeleton';
import { CheckinQrDialogView } from './checkin-qr.dialog.view';

export function CheckinQrDialogContainer({ event, children }: { event: EventInfo; children: React.ReactNode }) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const { data, isLoading, isError } = useCheckinCode(event.eventId, isDialogOpen);

  return (
    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
      {children}
      {isLoading && (
        <CheckinQrDialogSkeleton />
      )}
      {isError && (
        <CheckinQrDialogError />
      )}
      {!isLoading && !isError && !isNil(data) && (
        <CheckinQrDialogView checkinCode={String(data.data!.checkin_code)} />
      )}
    </Dialog>
  );
}