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 { EventTabs, EventTimeRange, InvitationStatus } 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 Past: FC = () => {
  const { t } = useLokaliseTranslation('events');

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

  if (isLoading) return <EventsSkeleton />;

  return (
    <Stack>
      <HuTitle
        title={t('PAST_EVENTS')}
        variant="M"
        sx={{ mb: 2 }}
      />
      {isSuccess && data?.data.count === 0 && (
        <EmptyState
          titleProps={{
            title: t('NO_PAST_EVENTS'),
          }}
        />
      )}
      <Stack sx={{ gap: 1 }}>
        {data?.data.items.map(e => (
          <EventCard
            key={e.id}
            event={e}
            includeDateInCopetin
            source={EventTabs.PAST_EVENTS_TAB}
          />
        ))}
      </Stack>
    </Stack>
  );
};

export default Past;