<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import { calendar } from "@/components/timebookings/displays/CalendarController.vue"
const props = defineProps({
  calendarId: {
    type: String,
    default: 'calendar',
  },
});

const emit = defineEmits(['eventClick']);

const handleEventClick = (info) => {
  console.log('Event clicked:', info.event.id);
  let event = info.event;
  let element = info.el;
  // Emit the event click to the parent component
  emit('eventClick', info.event);
};
let randomId = calendar.functions.generateRandomId()

// Set up the calendar
calendar.functions.addEvent(calendar.functions.generateEventObject({
  id: randomId,
  start: new Date(),
  end: new Date(new Date().getTime() + 60 * 60 * 1000),
  title: 'New Event',
  allDay: false,
}))
console.log('Created event:', calendar.functions.getEvents());

// Set the click event
calendar.eventClick.setEventClick(handleEventClick);

const icsUrl = 'https://cloud.truckwash.dk/remote.php/dav/public-calendars/r3DPYmCLfRp7NLgT?export';
// Set the ICS URL, fetch and parse the data.
calendar.functions.setIcsUrl(icsUrl);
calendar.functions.fetchAndParseIcsData();
</script>

<template>
  <iframe width="100%" height="600" src="https://cloud.truckwash.dk/apps/calendar/embed/r3DPYmCLfRp7NLgT/timeGridWeek/now"></iframe>
  <!--
  <FullCalendar
    :options="{
      plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay',
      },
      initialView: 'dayGridMonth',
      events: [
          ...calendar.functions.getEvents(),
      ],
      eventClick: calendar.eventClick.executeEventClick,
    }"
  /> -->
</template>

<style scoped>

</style>