<script setup>
import { ref } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { getError, addError, hasError } from "@/components/request/HandleGlobalError.vue";
import { IS_DEV } from '@/main.js'
import 'bulma-list/css/bulma-list.css';
import '@creativebulma/bulma-badge/dist/bulma-badge.css';
import UserNotificationListItem from "@/components/displays/user/notifications/UserNotificationListItem.vue";
const notifications = ref([]);
const isDropdownActive = ref(false);
const isLoading = ref(true);
const element_id = ref(null);
// Generate a random ID
const uniqueId = () => {
  return Math.random().toString(36).substr(2, 9);
};

// Set the element ID
element_id.value = uniqueId();

// Fetch the notifications
const fetchNotifications = async () => {
  // Get the notifications
  await SessionUser.objects.notifications.get.all().then((notifications_arr) => {
    //console.log(notifications_arr);
    notifications.value = notifications_arr;
    isLoading.value = false;
  }).catch((error) => {
      addError(error, element_id.value);
      isLoading.value = false;
  });
};

// Fetch the notifications
fetchNotifications();

// Get the notification count every 30 seconds
setInterval(() => {
  fetchNotifications();
}, 30000);
</script>

<template>
  <div id="notifications">
    <div class="is-flex is-justify-content-end">
      <div class="dropdown is-right" :class="{ 'is-active': isDropdownActive }" style="z-index: 1000;">
        <div class="dropdown-trigger" @click="isDropdownActive = !isDropdownActive">
          <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <!-- Notification count -->

            <span class="icon is-small">
              <!-- Notification (Count) -->
              <span title="Badge top right" class="badge is-danger" v-if="notifications.length > 0">{{ notifications.length }}</span>
              <i
                  class="fas"
                  :class="{
                            'fa-exclamation-triangle': hasError(uniqueId),
                            'fa-bell': (!hasError(uniqueId) && !isLoading),
                            'fa-spinner': isLoading
                   }"
                  aria-hidden="true"
              ></i>
            </span>
          </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
          <div class="dropdown-content py-0">
            <div class="list has-overflow-ellipsis" style="width: 340px">
              <template v-for="notification in notifications" :key="notification.id">
                <UserNotificationListItem class="list-item" v-bind:notification="notification" :reload="fetchNotifications" />
              </template>
              <!-- Loading -->
              <div v-if="isLoading">
                <div class="list-item">
                  <div class="list-item-content">
                    <div class="list-item-title">{{SessionUser.objects.global.language.loading}}</div>
                    <div class="list-item-description">{{ SessionUser.objects.global.language.loading }} {{ SessionUser.objects.notifications.meta.labels.multiple }}</div>
                    </div>
                </div>
              </div>
              <!-- No notifications -->
              <div v-if="!isLoading && notifications.length === 0">
                <div class="list-item">
                  <div class="list-item-content">
                    <div class="list-item-title">{{ SessionUser.objects.notifications.meta.title}}</div>
                    <div class="list-item-description">{{ SessionUser.objects.global.language.nothing_to_do_all_set}}</div>
                  </div>
                </div>
              </div>
              <!-- Error handling -->
              <div v-if="hasError(uniqueId)">
                <div class="list-item">
                  <div class="list-item-content">
                    <div class="list-item-title">Error</div>
                    <div class="list-item-description">{{ getError(uniqueId) }}</div>
                  </div>
                </div>
              </div>
              <!-- Debugging -->
              <div v-if="IS_DEV">
                <div class="list-item is-clickable is-hoverable" @click="SessionUser.objects.notifications.showCreateObjectForm(() => fetchNotifications(), { user_id: SessionUser.user.id.value })">
                  <div class="list-item-content">
                    <div class="list-item-title">Debug</div>
                    <div class="list-item-description">
                      <span class="icon">
                        <i class="fas fa-plus"></i>
                      </span>
                      {{ SessionUser.objects.notifications.meta.labels.single }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>