<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import isoWeek from "dayjs/plugin/isoWeek"
import isBetween from "dayjs/plugin/isBetween"
dayjs.extend(customParseFormat)
dayjs.extend(isoWeek)
dayjs.extend(isBetween)

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

const itemInfo = ref({})

const setupPage = () => {
  if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
}

const selectedPresetRange = ref("Dieser Monat")
const selectedStartDay = ref("")
const selectedEndDay = ref("")

const changeRange = () => {
  let selector = "w"
  let subtract = 0

  if(selectedPresetRange.value === "Diese Woche") {
    selector = "isoWeek"
    subtract = 0

  } else if(selectedPresetRange.value === "Dieser Monat") {
    selector = "M"
    subtract = 0

  } else if(selectedPresetRange.value === "Dieses Jahr") {
    selector = "y"
    subtract = 0
  } else if(selectedPresetRange.value === "Letzte Woche") {
    selector = "isoWeek"
    subtract = 1
  } else if(selectedPresetRange.value === "Letzter Monat") {
    selector = "M"
    subtract = 1
  } else if(selectedPresetRange.value === "Letztes Jahr") {
    selector = "y"
    subtract = 1
  }

  selectedStartDay.value = dayjs().subtract(subtract,selector).startOf(selector).format("YYYY-MM-DD")
  selectedEndDay.value = dayjs().subtract(subtract,selector).endOf(selector).format("YYYY-MM-DD")

}


const workingTimeInfo = computed(() => {

  let times = dataStore.getWorkingTimesByProfileId(itemInfo.value.id)

  times = times.filter(i => dayjs(i.date).isBetween(selectedStartDay.value,selectedEndDay.value,'day') && i.end)



  let weekFactor = 4.35
  let monthlyWorkingHours = itemInfo.value.weeklyWorkingHours * weekFactor


  //Eingreicht
  let sumWorkingMinutesEingereicht = 0
  times.filter(i => !i.approved).forEach(time => {
    console.log(time)
    const minutes = dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes')
    console.log(minutes)
    sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
  })

  //Bestätigt
  let sumWorkingMinutesApproved = 0
  times.filter(i => i.approved).forEach(time => {
    const minutes = Math.floor(dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes'))
    sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
  })


  //Saldo
  let saldo = (sumWorkingMinutesApproved / 60).toFixed(2) - monthlyWorkingHours
  let saldoInOfficial = ((sumWorkingMinutesApproved + sumWorkingMinutesEingereicht) / 60).toFixed(2) - monthlyWorkingHours




  return {
    monthlyWorkingHours,
    sumWorkingMinutesEingereicht,
    sumWorkingMinutesApproved,
    saldo,
    saldoInOfficial
  }
})

const getDuration = (time) => {
  const minutes = Math.floor(dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes',true))
  const hours = Math.floor(minutes/60)
  return {
    //dezimal: dez,
    hours: hours,
    minutes: minutes,
    composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
  }
}



setupPage()
changeRange()

</script>

<template>
  <UDashboardNavbar
    :title="itemInfo.fullName"
  >
  </UDashboardNavbar>

  <UTabs
    class="p-5"
    :items="[
        {
          label: 'Informationen'
        },{
          label: 'Logbuch'
        },{
          label: 'Zeiterfassung'
        },{
          label: 'Vertragsdaten'
        },{
          label: 'Dokumente'
        }
    ]"
  >
    <template #item="{item}">
      <UCard class="mt-5">
        <div v-if="item.label === 'Informationen'">
          <Toolbar>
            <UButton
                @click="dataStore.updateItem('profiles',itemInfo)"
            >
              Speichern
            </UButton>
          </Toolbar>
          <InputGroup class="w-full">
            <UFormGroup
              label="Anrede"
              class="w-60"
            >
              <UInput
                v-model="itemInfo.salutation"
              />
            </UFormGroup>
            <UFormGroup
              label="Vorname"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.firstName"
              />
            </UFormGroup>
            <UFormGroup
              label="Nachname"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.lastName"
              />
            </UFormGroup>
          </InputGroup>
          <InputGroup class="w-full">
            <UFormGroup
              label="Mitarbeiternummer"
              class="w-60"
            >
              <UInput
                v-model="itemInfo.employeeNumber"
              />
            </UFormGroup>
          <UFormGroup
              label="E-Mail"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.email"
              />
            </UFormGroup>
          </InputGroup>
        </div>
        <div v-if="item.label === 'Logbuch'">
          <HistoryDisplay
              type="profile"
              v-if="itemInfo"
              :element-id="itemInfo.id"
          />
        </div>
        <div v-if="item.label === 'Zeiterfassung'">
          <Toolbar>
            <UFormGroup
              label="Vorlage:"
            >
              <USelectMenu
                  :options="['Diese Woche', 'Dieser Monat', 'Dieses Jahr', 'Letzte Woche', 'Letzter Monat', 'Letztes Jahr']"
                  v-model="selectedPresetRange"
                  @change="changeRange"
              />
            </UFormGroup>

            <UFormGroup label="Start:" >
              <UPopover :popper="{ placement: 'bottom-start' }">
                <UButton
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="selectedStartDay ? dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum auswählen'"
                />

                <template #panel="{ close }">
                  <LazyDatePicker v-model="selectedStartDay" @close="changeRange" />
                </template>
              </UPopover>
            </UFormGroup>
            <UFormGroup label="Ende:">
              <UPopover :popper="{ placement: 'bottom-start' }">
                <UButton
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="selectedEndDay ? dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum auswählen'"
                />

                <template #panel="{ close }">
                  <LazyDatePicker v-model="selectedEndDay" @close="changeRange" />
                </template>
              </UPopover>
            </UFormGroup>
          </Toolbar>
          <div class="truncate">
            <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
            <p>Bestätigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
            <p>Soll Stunden: {{workingTimeInfo.monthlyWorkingHours}} h</p>
            <p>Abwesend: </p>
            <p>Ausgleich:</p>
            <p>Inoffizielles Saldo: {{workingTimeInfo.saldoInOfficial}} h</p>
            <p>Saldo: {{workingTimeInfo.saldo}} h</p>
          </div>

          <UTable
            :rows="dataStore.getWorkingTimesByProfileId(dataStore.activeProfile.id)"
            :columns="[
                {
                  key: 'state',
                  label: 'Status'
                }, {
                  key: 'date',
                  label: 'Datum'
                }, {
                  key: 'start',
                  label: 'Start'
                }, {
                  key: 'end',
                  label: 'Ende'
                }, {
                  key: 'duration',
                  label: 'Dauer'
                }, {
                  key: 'notes',
                  label: 'Notizen'
                }
            ]"
          >
            <template #profile-data="{row}">
              {{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
            </template>
            <template #date-data="{row}">
              {{dayjs(row.date).format("DD.MM.YYYY")}}
            </template>

            <template #start-data="{row}">
              {{dayjs(row.start, "HH:mm:ss").format("HH:mm")}} Uhr
            </template>
            <template #end-data="{row}">
              {{dayjs(row.end, "HH:mm:ss").format("HH:mm")}} Uhr
            </template>
            <template #duration-data="{row}">
              {{getDuration(row).composed}}
            </template>
          </UTable>


        </div>
        <div v-if="item.label === 'Vertragsdaten'">
          <Toolbar>
            <UButton
                @click="dataStore.updateItem('profiles',itemInfo)"
            >
              Speichern
            </UButton>
          </Toolbar>
          <InputGroup class="w-full">
            <UFormGroup
              label="Wöchentliche Arbeitszeit"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.weeklyWorkingHours"
              />
            </UFormGroup>
            <UFormGroup
              label="Durchschnittliche Arbeitstage pro Woche"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.weeklyWorkingDays"
              />
            </UFormGroup>
            <UFormGroup
              label="Urlaubstage"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.annualPaidLeaveDays"
              />
            </UFormGroup>
          </InputGroup>
        </div>
      </UCard>
    </template>
  </UTabs>
</template>

<style scoped>

</style>