import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

export default class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: [
        { title: 'Geburtstag', date: '2020-12-19' },
        { title: 'Weihnachten', date: '2020-12-24' },
      ],
    };
  }

  fetchEvents({start, end}, successCallback, failureCallback) {
    const calendarEvents = new wp.api.collections.CalendarEvent();
    calendarEvents.fetch({
      data: {
        before: start.toISOString(),
        after: end.toISOString(),
      }
    }).then(async (events) => {
      const mappedEvents = await Promise.all(events.map(async (event) => {
        const category = new wp.api.models.CalendarEventCategory({ id: event['calendar-event-category'][0] });
        await category.fetch();
        return {
          title: event.title.rendered,
          start: event.meta.start_date,
          end: event.meta.end_date,
          color: category.getMeta('color'),
        };
      }));
      successCallback(mappedEvents);
    }).catch((error) => {
      failureCallback(error);
    });
  }

  render() {
    return (
      <FullCalendar
        plugins={[ dayGridPlugin ]}
        initialView="dayGridMonth"
        events={this.fetchEvents}
        eventTimeFormat={{
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        }}
      />
    )
  }
}