<script setup>
import FullCalendar from "@fullcalendar/vue3"
import dayGridPlugin from '@fullcalendar/daygrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import deLocale from '@fullcalendar/core/locales/de'
import interactionPlugin from '@fullcalendar/interaction'

const supabase = useSupabaseClient()

const {getResources, getEvents, getEventTypes, fetchEvents} = useDataStore()
const resources = getResources
const eventTypes = getEventTypes
const events = getEvents

const openNewEventModal = ref(false)
const newEventData = ref({
  resourceId: "",
  resourceType: "",
  title: "",
  type: "Umsetzung",
  start: "",
  end: null
})
const createEvent = async () => {
  const {data,error} = await supabase
      .from("events")
      .insert([newEventData.value])
      .select()

  if(error) console.log(error)

  openNewEventModal.value = false
  newEventData.value = {}
  fetchEvents()
}


const calendarOptions = reactive({
  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
  locale: deLocale,
  plugins: [resourceTimelinePlugin, interactionPlugin],
  initialView: "resourceTimelineDay",
  headerToolbar: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
  },
  initialEvents: events,
  selectable: true,
  select: function (info) {
    //console.log(info)
    newEventData.value.resourceId = info.resource.id
    newEventData.value.resourceType = info.resource.extendedProps.type
    newEventData.value.start = info.startStr
    newEventData.value.end = info.endStr
    openNewEventModal.value = true
  },
  eventClick: function (info){
    console.log(info)
  },
  resourceGroupField: "type",
  resources: resources,
  nowIndicator:true
})

</script>

<template>
  <div>
    <UModal
      v-model="openNewEventModal"
    >
      <UCard>
        <template #header>
          Neuen Termin erstellen
        </template>

        <UFormGroup
          label="Resource:"
        >
          <USelectMenu
            v-model="newEventData.resourceId"
            :options="resources"
            value-attribute="id"
            option-attribute="title"
          >
            <template #label>
              <span>{{ resources.find(resource => resource.id === newEventData.resourceId).title }}</span>
            </template>
          </USelectMenu>
        </UFormGroup>
        <UFormGroup
          label="Titel:"
        >
          <UInput
            v-model="newEventData.title"
          />
        </UFormGroup>
        <UFormGroup
          label="Typ:"
        >
          <USelectMenu
            v-model="newEventData.type"
            :options="eventTypes"
            option-attribute="label"
            value-attribute="label"
          >

          </USelectMenu>
        </UFormGroup>
        <UFormGroup
          label="Start:"
        >
          <UInput
              v-model="newEventData.start"
          />
        </UFormGroup>
        <UFormGroup
          label="Ende:"
        >
          <UInput
              v-model="newEventData.end"
          />
        </UFormGroup>

        <template #footer>
          <UButton
            @click="createEvent"
          >
            Erstellen
          </UButton>
        </template>

      </UCard>
    </UModal>
    <FullCalendar
      :options="calendarOptions"
    />
  </div>
</template>

<style scoped>

</style>