import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import useEvents from 'src/hooks/queryHooks/events';
import { InvitationStatus, EventTimeRange, EventTabs } from 'src/types/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

import EmptyState from '../../components/EmptyState';
import EventCard from '../../components/EventCard';
import EventsSkeleton from '../../components/skeleton/EventsSkeleton';

export const Invitations: FC = () => {
  const { t } = useLokaliseTranslation('events');

  const {
    data: pendingInvitationsData,
    isLoading: pendingInvitationsLoading,
    isSuccess: pendingInvitationsSuccess,
  } = useEvents({
    pagination: { limit: 20, page: 0 },
    timeRange: EventTimeRange.UPCOMING,
    onlyInvited: true,
    invitationStatus: [InvitationStatus.PENDING],
  });

  const { data, isLoading, isSuccess } = useEvents({
    pagination: { limit: 500, page: 0 },
    timeRange: EventTimeRange.UPCOMING,
    onlyInvited: true,
    invitationStatus: [
      InvitationStatus.ACCEPTED,
      InvitationStatus.DECLINED,
      InvitationStatus.MAY_ASSIST,
    ],
  });

  const invitations = data?.data?.items || [];

  const pendingInvitations = pendingInvitationsData?.data?.items || [];

  if (isLoading || pendingInvitationsLoading) return <EventsSkeleton />;

  return (
    <Stack sx={{ gap: 2 }}>
      <HuTitle
        variant="M"
        title={t('PENDING_EVENTS')}
      />
      {pendingInvitationsSuccess && pendingInvitations.length === 0 && (
        <EmptyState
          titleProps={{
            title: t('INVITATIONS_WILL_SHOW'),
          }}
        />
      )}
      <Stack sx={{ gap: 1 }}>
        {pendingInvitations.map(e => (
          <EventCard
            key={e.id}
            event={e}
            includeDateInCopetin
            acceptResponse
          />
        ))}
      </Stack>
      <HuTitle
        variant="M"
        title={t('YOUR_ANSWERS')}
      />
      {isSuccess && invitations.length === 0 && (
        <EmptyState
          titleProps={{
            title: t('WILL_SHOW_WHEN_ANSWER'),
          }}
        />
      )}
      <Stack sx={{ gap: 1 }}>
        {invitations.map(e => (
          <EventCard
            key={e.id}
            event={e}
            includeDateInCopetin
            acceptResponse
            source={EventTabs.INVITATIONS_TAB}
          />
        ))}
      </Stack>
    </Stack>
  );
};

export default Invitations;