import { FC } from 'react';

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

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

import { useAuth } from 'src/contexts/JWTContext';
import { Event } from 'src/types/events';
import { formatDateEvents } from 'src/utils/date';

import EventCard from '../../components/EventCard';

type EventsOrderedByDateProps = {
  eventsByDate: {
    [date: string]: Event[];
  };
  source?: string;
};

export const EventsByDate: FC<EventsOrderedByDateProps> = ({
  eventsByDate,
  source,
}) => {
  const { user } = useAuth();
  const dateKeys = Object.keys(eventsByDate);

  return (
    <>
      {dateKeys.map(date => (
        <Stack
          key={date}
          sx={{ mb: 3 }}
        >
          <HuTitle
            variant="M"
            title={formatDateEvents(date, user)}
            sx={{ mb: 2 }}
          />
          <Stack sx={{ gap: 1 }}>
            {eventsByDate[date].map(e => (
              <EventCard
                key={e.id}
                event={e}
                source={source}
              />
            ))}
          </Stack>
        </Stack>
      ))}
    </>
  );
};

export default EventsByDate;
