<script setup>
import dayjs from "dayjs";


const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )

const mode = ref(route.params.mode || "show")
const itemInfo = ref({
  startDate: new Date(),
  endDate: new Date(),
  profile: dataStore.activeProfile.id
})
const oldItemInfo = ref({})

const setupPage = () => {
  if(route.params.id && mode.value === 'edit') {
    itemInfo.value = dataStore.getWorkingTimeById(Number(route.params.id))
    //setStartEnd()
  }
  oldItemInfo.value = itemInfo.value
}

/*const setStartEnd = () => {
  console.log("test")
  console.log(String(itemInfo.value.date).split("T")[0])
  itemInfo.value.date = String(itemInfo.value.date).split("T")[0]
  itemInfo.value.start = new Date(itemInfo.value.date + "T" + itemInfo.value.start)
  itemInfo.value.end = new Date(itemInfo.value.date + "T" + itemInfo.value.end)
}*/

setupPage()
</script>

<template>
  <UDashboardNavbar
    :title="mode === 'show' ? `Anwesenheit: ${itemInfo.profile}` : (itemInfo.id ? 'Anwesenheit bearbeiten' :'Anwesenheit erstellen')"
  >
    <template #right>
      <UButton
        color="rose"
        v-if="mode === 'edit'"
        @click="router.push('/workingtimes')"
      >
        Abbrechen
      </UButton>
      <UButton
        v-if="mode === 'edit' && itemInfo.id"
        @click="dataStore.updateItem('workingtimes',itemInfo)"
      >
        Speichern
      </UButton>
      <UButton
        v-else-if="mode === 'edit' && !itemInfo.id"
      >
        Erstellen
      </UButton>
    </template>
  </UDashboardNavbar>

  <UForm class="p-5">
    <UFormGroup
      label="Mitarbeiter:"
    >
      <USelectMenu
        :options="dataStore.profiles"
        v-model="itemInfo.profile"
        option-attribute="fullName"
        value-attribute="id"
      />
    </UFormGroup>
    <UFormGroup label="Start:">
      <UPopover :popper="{ placement: 'bottom-start' }">
        <UButton
            icon="i-heroicons-calendar-days-20-solid"
            :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('HH:mm') : 'Datum auswählen'"
            variant="outline"
        />

        <template #panel="{ close }">
          <LazyDatePicker v-model="itemInfo.startDate" @close="itemInfo.endDate = itemInfo.startDate" mode="dateTime"/>
        </template>
      </UPopover>
    </UFormGroup>

    <UFormGroup label="Ende:">
      <UPopover :popper="{ placement: 'bottom-start' }">
        <UButton
            variant="outline"
            icon="i-heroicons-calendar-days-20-solid"
            :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('HH:mm') : 'Datum auswählen'"
        />

        <template #panel="{ close }">
          <LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="time"/>
        </template>
      </UPopover>
    </UFormGroup>
    <UFormGroup
      label="Genehmigt:"
    >
      <UCheckbox
        v-model="itemInfo.approved"
      />
    </UFormGroup>
    <UFormGroup
      label="Notizen:"
    >
      <UTextarea
        v-model="itemInfo.notes"
      />
    </UFormGroup>
  </UForm>

</template>

<style scoped>

</style>