<script setup>
import {formatTimeAgo} from '@vueuse/core'

const supabase = useSupabaseClient()


const { isNotificationsSlideoverOpen } = useDashboard()

watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
  if(newVal === true) {
    await setup()
  }
})

const notifications = ref([])

const setup = async () => {
  notifications.value = (await supabase.from("notifications").select()).data
}

setup()

const setNotificationAsRead = async (notification) => {
  console.log(notification)

  const {data,error} = await supabase.from("notifications").update({read: true}).eq("id", notification.id)

  console.log(error)

  setup()

}
</script>

<template>
  <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
    <NuxtLink
        v-for="notification in notifications"
        :key="notification.id"
        :to="notification.link"
        class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
        @click="setNotificationAsRead(notification)"
    >
      <UChip color="primary" :show="!notification.read" inset>
        <UAvatar alt="FEDEO" size="md" />
      </UChip>

      <div class="text-sm flex-1">
        <p class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>

          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
        </p>
        <p class="text-gray-500 dark:text-gray-400">
          {{ notification.message }}
        </p>
      </div>
    </NuxtLink>
  </UDashboardSlideover>
</template>
