<script setup>

const route = useRoute()
const router = useRouter()
const dataStore = useDataStore()


const itemInfo = ref({
  resources: []
})


const setupPage = () => {
  if(route.query.start) itemInfo.value.start = route.query.start.replace(" ", "+")
  if(route.query.end) itemInfo.value.end = route.query.end.replace(" ", "+")
  if(route.query.resources) itemInfo.value.resources = JSON.parse(route.query.resources)
  if(route.query.project) itemInfo.value.project = route.query.project
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Neuen Termin erstellen">
    <template #right>
      <UButton
        color="rose"
        @click="router.push(`/calendar/${route.query.source}`)"
      >
        Abbrechen
      </UButton>

      <UButton
        @click="dataStore.createNewItem('events',itemInfo)"
      >
        Erstellen
      </UButton>
    </template>
  </UDashboardNavbar>
<!--  <UDashboardToolbar>

  </UDashboardToolbar>-->

  <UForm class="p-5">
    <UFormGroup
        label="Resource:"
    >
      <USelectMenu
          v-model="itemInfo.resources"
          :options="dataStore.getResources"
          option-attribute="title"
          value-attribute="id"
          multiple
          @change=""
      >
        <template #label>
          <span v-if="itemInfo.resources.length == 0">Keine Ressourcen ausgewählt</span>
          <span v-else >{{ itemInfo.resources.length }} ausgewählt</span>
        </template>
      </USelectMenu>
    </UFormGroup>
    <UFormGroup
        label="Titel:"
    >
      <UInput
          v-model="itemInfo.title"
      />
    </UFormGroup>
    <UFormGroup
        label="Projekt:"
    >
      <USelectMenu
          v-model="itemInfo.project"
          :options="dataStore.projects"
          option-attribute="name"
          value-attribute="id"
          searchable
          searchable-placeholder="Suche..."
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
        </template>

      </USelectMenu>
    </UFormGroup>
    <UFormGroup
        label="Typ:"
    >
      <USelectMenu
          v-model="itemInfo.type"
          :options="dataStore.getEventTypes"
          option-attribute="label"
          value-attribute="label"
      >

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

<style scoped>

</style>