import React from 'react';
import CalendarListItem from 'app/modules/calendar/components/calendarListItem';
import { useSelector } from 'react-redux';
import { createCalendarIsLoadingSelector, selectSortedEvents } from '../store/calendar.selectors';
import { Headline, Paragraph } from 'app/shared/components/text/text';
import { CALENDAR } from '../store/calendar.constants';
import { Spinner } from '../../../shared/components/spinner/spinner';

const noEvents = (past = false) => <div className="o-layout o-layout--vertical o-layout--aligned u-full-width">
  <img src="assets/images/calendar_no_events.png" alt="No Events" />
  <Paragraph extraClass="u-margin-bottom--tiny u-align--center">
    {`${past ? 'Past' : 'Stay tuned, scheduled'} events will appear here`}
  </Paragraph>
  <Paragraph size="small" extraClass="u-color--dark-grey">
    {`No ${past ? 'past' : 'upcoming'} events`}
  </Paragraph>
</div>;

const CalendarList = () => {
  const { upcomingEvents, pastEvents } = useSelector(selectSortedEvents);
  const calendarFetchCollectionSelector = [ CALENDAR.FETCH_EVENTS_SELECTOR ];
  const isLoading = useSelector(createCalendarIsLoadingSelector(calendarFetchCollectionSelector));

  return isLoading ? <Spinner /> : <div className="u-full-width">
    <Headline size="h2" extraClass="u-margin-bottom--medium">Upcoming events</Headline>
    <ul>{!upcomingEvents.length ? noEvents() :
      upcomingEvents.map((calendarEvent) => <li key={calendarEvent.id}>
        <CalendarListItem event={calendarEvent} />
      </li>
      )}
    </ul>
    <div className="u-margin-top--jumbo">
      <Headline size="h2" extraClass="u-margin-bottom--medium">Past events</Headline>
    </div>
    <ul>{!pastEvents.length ? noEvents(true) :
      pastEvents.map((calendarEvent) => <li key={calendarEvent.id}>
        <CalendarListItem event={calendarEvent} past />
      </li>
      )}
    </ul>
  </div>;
};

export default CalendarList;