import type { EventInfo } from './types';
import PlaceholderImage from '@/assets/event-placeholder.png';
import { useGetEvents } from '@/hooks/data/useGetEvents';
import { Button } from '../ui/button';
import { DialogTrigger } from '../ui/dialog';
import { EventGridSkeleton } from './event-grid.skeleton';
import { EventGridView } from './event-grid.view';
import { EventJoinContainer } from './event-join.dialog.container';
import { KycDialogContainer } from './kyc/kyc.dialog.container';

function JoinButton() {
  return (
    <Button className="w-full">加入活动</Button>
  );
}

export function EventGridContainer() {
  const { data, isLoading } = useGetEvents();

  return (
    isLoading
      ? <EventGridSkeleton />
      : (
        <EventGridView
          events={data.pages.flatMap(page => page.data ?? []).map(it => ({
            type: it.type! as EventInfo['type'],
            eventId: it.event_id!,
            isJoined: it.is_joined!,
            requireKyc: it.enable_kyc!,
            coverImage: it.thumbnail! || PlaceholderImage,
            eventName: it.name!,
            description: it.description!,
            startTime: new Date(it.start_time!),
            endTime: new Date(it.end_time!),
          } satisfies EventInfo))}
          footer={eventInfo => (eventInfo.isJoined
            ? <Button className="w-full" disabled>已加入</Button>
            : (
              eventInfo.requireKyc
                ? (
                  <KycDialogContainer event={eventInfo}>
                    <DialogTrigger asChild>
                      <JoinButton />
                    </DialogTrigger>
                  </KycDialogContainer>
                )
                : (
                  <EventJoinContainer event={eventInfo}>
                    <DialogTrigger asChild>
                      <JoinButton />
                    </DialogTrigger>
                  </EventJoinContainer>
                )
            )
          )}
        />
      )
  );
}