import { type FC } from 'react';

import { groupBy } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';

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

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

import EventsByDate from './EventsByDate';

export const OrganizedByMe: FC = () => {
  const { t } = useLokaliseTranslation('events');
  const { data: groups = {}, isLoading } = useEvents({
    pagination: { limit: 500, page: 0 },
    timeRange: EventTimeRange.UPCOMING,
    onlyInvited: false,
    onlyCreatedByUser: true,
    useQueryOptions: {
      select: r =>
        groupBy(r.data.items, e => new Date(e.startDateTime).toDateString()),
    },
  });

  const groupKeys = Object.keys(groups);

  if (isLoading) return <EventsSkeleton eventGroups={2} />;

  return (
    <Stack>
      {!isLoading && groupKeys.length === 0 && (
        <EmptyState
          titleProps={{
            title: t('NO_NEXT_EVENTS'),
            description: t('EVENTS_WILL_BE_LISTED_HERE'),
          }}
        />
      )}
      <EventsByDate
        eventsByDate={groups}
        source={EventTabs.ORGANIZED_BY_ME_TAB}
      />
    </Stack>
  );
};
export default OrganizedByMe;
