<template>
  <UDashboardPage>
    <UDashboardPanel grow>
      <UDashboardNavbar title="Home">
        <template #right>
          <UTooltip text="Notifications" :shortcuts="['N']">
            <UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
              <UChip :show="unreadMessages" color="primary" inset>
                <UIcon name="i-heroicons-bell" class="w-5 h-5" />
              </UChip>
            </UButton>
          </UTooltip>
        </template>
      </UDashboardNavbar>

      <UDashboardPanelContent>
        <UDashboardCard
            class="mt-3"
            title="Anwesenheiten"
            v-if="dataStore.getStartedWorkingTimes().length > 0"
        >
          <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{profileStore.getProfileById(time.profile).fullName}}</p>
        </UDashboardCard>


        <UDashboardCard
            class="mt-3"
        >
          <display-income-and-expenditure/>
        </UDashboardCard>
        <UDashboardCard
            class="w-1/3 mt-3"
        >
          <display-open-balances/>
        </UDashboardCard>
        <UDashboardCard
            class="w-1/3 mt-3"
        >
          <display-running-time/>
        </UDashboardCard>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardPage>
</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const profileStore = useProfileStore()
const toast = useToast()
const router = useRouter()

const { isNotificationsSlideoverOpen } = useDashboard()
const items = [[{
  label: 'Aufgabe',
  icon: 'i-heroicons-paper-airplane',
  to: '/tasks/create'
}, {
  label: 'Kunde',
  icon: 'i-heroicons-user-plus',
  to: '/customers/create'
}]]


const supabase = useSupabaseClient()

const user = useSupabaseUser()

const unreadMessages = ref(false)
const setup = async () => {
  unreadMessages.value = (await supabase.from("notifications").select("id,read").eq("read",false)).data.length > 0
}

setup()
</script>

<style scoped>
.card {
  border: 1px solid darkgray;
  border-radius: 20px;

}
</style>