<script setup lang="ts">
  import type {Ref} from "vue";
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {NotificationMessage} from "~/types/notificationMessage";

  let store = useLabelEditorStore();

  let dialog: Ref<boolean> = ref<boolean>(false);

  let pageCount: Ref<number> = ref<number>(1);
  let page: Ref<number> = ref<number>(1);

  let notifications: Ref<NotificationMessage[]> = ref<NotificationMessage[]>([]);
  let notificationPages: Ref<NotificationMessage[][]> = ref<NotificationMessage[][]>([]);

  const pageItemCount = 25;

  watch(dialog, async (oldDialog) => {
    loadNotifications();
  })

  function loadNotifications() {
    notifications.value = store.getNotifications();
    const length = notifications.value.length;
    pageCount.value = Math.ceil(length / pageItemCount);

    for (let i = 0; i < pageCount.value; i++) {
      notificationPages.value[i] = notifications.value.slice((i * pageItemCount), ((i + 1) * pageItemCount));
    }
  }

  function clear() {
    store.clearNotifications();
    loadNotifications();
  }

</script>

<template>
  <v-dialog
      v-model="dialog"
      :scrollable="true"
      width="800"
      max-height="750"
  >
    <template v-slot:activator="{ props }">
      <v-btn
          :flat="true"
          v-bind="props"
      >
        <v-icon>mdi-bell</v-icon>
        <v-tooltip
            activator="parent"
            location="bottom"
        >
          Benachrichtigungen
        </v-tooltip>
      </v-btn>
    </template>

    <v-card>
      <v-card-title>
        <v-icon size="small">
          mdi-bell
        </v-icon>

        Benachrichtigungen
      </v-card-title>

      <v-divider/>

      <v-card-text>
        <div
            v-for="notification in notificationPages[page - 1]"
            :key="notification.id"
        >
          <v-row density="compact">
            <v-col cols="2">
              <v-sheet>
                <v-icon v-if="notification.error" color="red">mdi-alert-circle-outline</v-icon>
                <v-icon v-else color="green">mdi-check</v-icon>

                {{ notification.error ? 'Fehler' : 'Okay' }}
              </v-sheet>
            </v-col>
            <v-col  cols="3">
              <v-sheet>
                {{ notification.dateTime }}
              </v-sheet>
            </v-col>
            <v-col>
              <v-sheet>
                {{ notification.message }}
              </v-sheet>
            </v-col>
          </v-row>
        </div>
      </v-card-text>

      <v-divider/>

      <v-pagination
          v-model="page"
          :length="pageCount"
      ></v-pagination>

      <v-divider/>

      <v-card-actions>
        <v-btn
            variant="text"
            @click="clear();"
        >
          <v-icon>mdi-delete</v-icon>
          <v-tooltip
              activator="parent"
              location="right"
          >
            Benachrichtigungen löschen
          </v-tooltip>
        </v-btn>

        <v-spacer/>

        <v-divider :vertical="true"/>

        <v-btn
            variant="text"
            @click="dialog = false"
        >
          Schließen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>

</style>