<script setup>
import { ref } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'
import Dropdown from './Dropdown.vue'
import GhostButton from '@/Components/Buttons/GhostButton.vue'
import IconBell from '@/Icons/Bell.vue'
import Modal from '@/Components/Modals/Modal.vue'

// variables
const notifications = ref(usePage().props.value.notifications)
const hasUnreadNotifications = ref(usePage().props.value.unreadNotifications)
const showNotification = ref(false)
const activeNotification = ref({})

// methods
const openNotification = (notification) => {
  activeNotification.value = notification
  showNotification.value = true
  markActiveAsRead()
}

const closeModal = () => {
  showNotification.value = false
  activeNotification.value = {}
}

const markActiveAsRead = () => {
  axios.post(route('api.notifications.mark-read', activeNotification.value.id))
    .then(resp => {
      activeNotification.value.read_at = resp.data.read_at
    })
    .catch(erro => {
//console.error(erro)
    })
}

const markAllRead = () => {
  axios.post(route('api.notifications.mark-all-read'))
    .then(resp => {
      let nowDt = new Date()
      notifications.value.forEach(notification => {
        if (notification.read_at === null) {
          notification.read_at = nowDt
        }
      })
      hasUnreadNotifications.value = false
    })
    .catch(erro => {
//console.error(erro)
    })
}
</script>

<template>
    <Dropdown align="right" width="80">
        <template #trigger>
            <GhostButton>
                <IconBell></IconBell>
                <div v-show="hasUnreadNotifications" class="absolute top-2 right-4 w-3 h-3 z-10 border-2 border-stone-100 bg-red-800 rounded-full">&nbsp;</div>
            </GhostButton>
        </template>

        <template #content>
            <div class="w-full">
                <div class="grid auto-rows-max gap-y-px bg-stone-400">
                    <template v-for="notification in notifications" :key="notification.id">
                    <div class="px-4 py-2 grid auto-rows-max gap-3 cursor-pointer" :class="{'bg-stone-200': notification.read_at !== null, 'bg-white': notification.read_at === null}" @click="openNotification(notification)">
                        <div>{{ notification.data.title }}</div>
                        <div class="text-xs text-zinc-600">{{ notification.data.created_at_date }}</div>
                    </div>
                    </template>
                </div>

                <div class="border-t border-gray-100"></div>

                <div class="px-2">
                    <button class="btn btn-ghost text-xs" @click="markAllRead">Mark All Read</button>
                </div>
            </div>
        </template>
    </Dropdown>

    <Modal :show="showNotification" @close="closeModal">
        <div class="grid auto-rows-max">
            <header class="bg-sky-800 text-white p-4">{{ activeNotification.data.title }}</header>
            <div class="p-4 bg-white text-zinc-900">
                <p class="mb-4">{{ activeNotification.data.body }}</p>

                <p class="text-sm">{{ activeNotification.data.type }} | {{ activeNotification.data.created_at_date }} at {{ activeNotification.data.created_at_time }}</p>
            </div>
        </div>
    </Modal>
</template>
