<script setup>
import { socket } from '@/composables/useSocket'
import { h } from 'vue';

const userData = useCookie('userData')
const router = useRouter()

const notifications = ref([])


let titleDoc = 'AkkiPerto'

const handleTitle = (quantidade) => {
  if (quantidade > 0) {
    //Atualizar titulo da página
    if (document.title.includes('(')) {
      document.title = titleDoc
    }

    document.title = `(${quantidade}) AkkiPerto`
  } else {
    document.title = titleDoc
  }

}

const getNotificacoes = async () => {

  if (!userData.value) return

  try {
    const res = await $api('/noti/get-noti', {
      method: 'POST',
      body: {
        id_user: userData.value.id
      }
    })

    console.log('Res Noti', res)
    notifications.value = res
    //console.log('Notificações: ', notifications.value)

    if (res.length > 0) {
      let quantidade = res.filter(item => !item.seen).length
      handleTitle(quantidade)
    }

  } catch (error) {
    console.log('Erro ao buscar notificações', error, error.response)
  }
}

getNotificacoes()

socket.on("newNotification", (data) => {
  console.log('Atualizar Notificações', data)
  getNotificacoes()
})


const removeNotification = async notificationId => {
  console.log('Remove Notification', notificationId)
  notifications.value.forEach(async (item, index) => {
    if (notificationId === item.id) {
      try {
        const res = await $api('/noti/delete-noti', {
          method: 'POST',
          body: {
            id_notificacao: notificationId
          }
        })

        if (res) {
          notifications.value.splice(index, 1)

          let quantidade = notifications.value.filter(item => !item.seen).length
          handleTitle(quantidade)
        }
      } catch (error) {
        console.log('Erro ao deletar notificação', error, error.response)
      }
    }
  })
}

const markRead = async (notificationId) => {
  notifications.value.forEach(item => {
    notificationId.forEach(async id => {
      if (id === item.id) {
        try {
          const res = await $api('/noti/marcar-noti', {
            method: 'POST',
            body: {
              id_notificacao: id
            }
          })

          console.log('Res Marcar Noti', res)

          if (res) {
            item.seen = true

            let quantidade = notifications.value.filter(item => !item.seen).length
            handleTitle(quantidade)
          }
        } catch (error) {
          console.log('Erro ao deletar notificação', error, error.response)
        }
      }
    })
  })
}

const markUnRead = async notificationId => {
  notifications.value.forEach(item => {
    notificationId.forEach(async id => {
      if (id === item.id) {
        try {
          const res = await $api('/noti/desmarcar-noti', {
            method: 'POST',
            body: {
              id_notificacao: id
            }
          })

          if (res) {
            item.seen = false

            let quantidade = notifications.value.filter(item => !item.seen).length
            handleTitle(quantidade)
          }
        } catch (error) {
          console.log('Erro ao deletar notificação', error, error.response)
        }
      }
    })
  })
}

const handleNotificationClick = notification => {
  console.log('Notification Clicked', notification)

  if (!notification.seen) {
    markRead([notification.id]);
  } else {
    markUnRead([notification.id]);
  }
}
</script>

<template>
  <Notifications :notifications="notifications" @remove="removeNotification" @read="markRead" @unread="markUnRead"
    @click:notification="handleNotificationClick" @click="getNotificacoes" />
</template>
