<script setup>
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import isoWeek from "dayjs/plugin/isoWeek";
import isBetween from "dayjs/plugin/isBetween";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
import {useCreateWorkingTimesPdf} from "~/composables/useWorkingTimePDFGenerator.js";
import {useFunctions} from "~/composables/useFunctions.js";
dayjs.extend(customParseFormat)
dayjs.extend(isoWeek)
dayjs.extend(isBetween)
dayjs.extend(isSameOrAfter)
dayjs.extend(isSameOrBefore)



const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()

const itemInfo = ref({})
const oldItemInfo = ref({})

const workingtimes = ref([])
const absencerequests = ref([])

const workingTimeInfo = ref(null)
const selectedPresetRange = ref("Dieser Monat bis heute")
const selectedStartDay = ref("")
const selectedEndDay = ref("")

const setupPage = async () => {
  if(route.params.id) itemInfo.value = profileStore.getProfileById(route.params.id)
  //if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
  workingtimes.value = (await supabase.from("workingtimes").select().eq("profile",itemInfo.value.id).order("startDate",{ascending:false})).data
  absencerequests.value = (await supabase.from("absencerequests").select().eq("profile",itemInfo.value.id).order("startDate",{ascending: false})).data

  await loadWorkingTimeInfo()

}

const loadWorkingTimeInfo = async () => {
  workingTimeInfo.value = await useFunctions().getWorkingTimesEvaluationData(route.params.id,selectedStartDay.value,selectedEndDay.value)
  console.log(workingTimeInfo.value)
  openTab.value = 0
}


const changeRange = () => {
  let selector = "M"
  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 === "Dieser Monat bis heute") {
    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 === "isoWeek" ? "week" : selector).startOf(selector).format("YYYY-MM-DD")
  if(selectedPresetRange.value === "Dieser Monat bis heute") {
    selectedEndDay.value = dayjs().format("YYYY-MM-DD")
  } else {
    selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")

  }

  openTab.value = 0
  loadWorkingTimeInfo()
}

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

const showDocument = ref(false)
const uri = ref("")
const generateDocument = async () => {
  const ownTenant = profileStore.ownTenant
  const path = (await supabase.from("letterheads").select().eq("tenant",profileStore.currentTenant)).data[0].path
  console.log(path)

  const {data,error} = await supabase.storage.from("files").download(path)

  uri.value = await useCreateWorkingTimesPdf({
    profile: profileStore.getProfileById(route.params.id).fullName,
    ...workingTimeInfo.value}, await data.arrayBuffer())
  //alert(uri.value)
  showDocument.value = true
}

const generateEvaluation = async () => {
  await generateDocument()
}

const openTab = ref(0)
const onTabChange = async (index) => {
  if(index === 1) {
    await generateEvaluation()
  }
}


setupPage()
changeRange()

</script>

<template>
  <UDashboardNavbar
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/workingtimes`)"
      >
        Anwesenheiten
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          :class="['text-xl','font-medium']"
      >{{itemInfo ? `Auswertung Anwesenheiten: ${itemInfo.fullName}` : ``}}</h1>
    </template>

  </UDashboardNavbar>
  <UDashboardToolbar>
    <template #left>
      <UFormGroup
          label="Vorlage:"
      >
        <USelectMenu
            :options="['Dieser Monat bis heute','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="loadWorkingTimeInfo" />
          </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="loadWorkingTimeInfo" />
          </template>
        </UPopover>
      </UFormGroup>
    </template>
  </UDashboardToolbar>
  <UDashboardPanelContent>
    <UTabs
        :items="[{label: 'Information'},{label: 'Bericht'}]"
        @change="onTabChange"
        v-model="openTab"
    >
      <template #item="{item}">
        <div v-if="item.label === 'Information'">
          <UCard class="truncate my-5" v-if="workingTimeInfo">
            <template #header>
              Zusammenfassung
            </template>
            <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
            <p>Genehmigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
            <p>Feiertagsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesRecreationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesRecreationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumRecreationDays}} Tage</p>
            <p>Urlaubs-/Berufsschulausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesVacationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesVacationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumVacationDays}} Tage</p>
            <p>Krankheitsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesSickDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesSickDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumSickDays}} Tage</p>
            <p>Soll Stunden: {{Math.floor(workingTimeInfo.timeSpanWorkingMinutes/60)}}:{{String(workingTimeInfo.timeSpanWorkingMinutes % 60 ).padStart(2,"0")}} h</p>

            <!--         <p>Abwesend: </p>

                     <p>Ausgleich:</p>
           -->
            <p>Inoffizielles Saldo(eingereichte Stunden): {{Math.sign(workingTimeInfo.saldoInOfficial) === 1 ? "+" : "-"}} {{Math.floor(Math.abs(workingTimeInfo.saldoInOfficial/60))}}:{{String(Math.abs(workingTimeInfo.saldoInOfficial)  % 60).padStart(2,"0")}} h</p>
            <p>Saldo(genehmigte Stunden): {{Math.sign(workingTimeInfo.saldo) === 1 ? "+" : "-"}} {{Math.floor(Math.abs(workingTimeInfo.saldo/60))}}:{{String(Math.abs(workingTimeInfo.saldo)  % 60).padStart(2,"0")}} h</p>
          </UCard>

          <div style="overflow-y: scroll; height: 45vh">
            <UTable
                v-if="workingTimeInfo"
                :rows="workingTimeInfo.times"
                @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Anwesenheiten anzuzeigen` }"
                :columns="[
                {
                  key: 'state',
                  label: 'Status'
                }, {
                  key: 'approved',
                  label: 'Genehmigt'
                }, {
                  key: 'start',
                  label: 'Start'
                }, {
                  key: 'end',
                  label: 'Ende'
                }, {
                  key: 'duration',
                  label: 'Dauer'
                }, {
                  key: 'notes',
                  label: 'Notizen'
                }
            ]"
            >
              <template #profile-data="{row}">
                {{profileStore.profiles.find(profile => profile.id === row.profile) ? profileStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
              </template>
              <template #approved-data="{row}">
                <span v-if="row.approved" class="text-primary-500">Ja</span>
                <span v-else class="text-rose-600">Nein</span>
              </template>

              <template #start-data="{row}">
                {{dayjs(row.startDate).format("HH:mm DD.MM.YY")}} Uhr
              </template>
              <template #end-data="{row}">
                {{dayjs(row.endDate).format("HH:mm DD.MM.YY")}} Uhr
              </template>
              <template #duration-data="{row}">
                {{getDuration(row).composed}}
              </template>
            </UTable>
          </div>


        </div>
        <div v-else-if="item.label === 'Bericht'">
          <UProgress animation="carousel" v-if="!showDocument"/>
          <object
              :data="uri"
              v-else
              type="application/pdf"
              class="w-full previewDocument"
          />
        </div>
      </template>
    </UTabs>
  </UDashboardPanelContent>
</template>

<style scoped>
.previewDocument {
  height: 80vh;
}
</style>