<script setup>

import { onMounted, ref, useTemplateRef } from 'vue';
import { marked } from 'marked';
import { eachLimit } from 'async';
import { Button, Popover, Icon } from 'pankow';
import NotificationsModel from '../models/NotificationsModel.js';

const props = defineProps(['config', 'profile', 'subscription']);

const notificationModel = NotificationsModel.create();
const notificationButton = useTemplateRef('notificationButton');
const notificationPopover = useTemplateRef('notificationPopover');
const notifications = ref([]);
const notificationsAllBusy = ref(false);

function onOpenNotifications(popover, event, elem) {
  popover.open(event, elem);
}

async function onMarkNotificationRead(notification) {
  notification.busy = true;
  const [error] = await notificationModel.update(notification.id, true);
  if (error) return console.error(error);

  await refresh();
}

async function onMarkAllNotificationRead() {
  notificationsAllBusy.value = true;

  await eachLimit(notifications.value, 2, async (notification) => {
    notification.busy = true;
    const [error] = await notificationModel.update(notification.id, true);
    if (error) return console.error(error);
  });

  await refresh();

  notificationsAllBusy.value = false;
}

async function refresh() {
  const [error, result] = await notificationModel.list();
  if (error) return console.error(error);

  result.forEach(n => {
    n.isCollapsed = true;
    n.busy = false;
  });

  notifications.value = result;
}

onMounted(async () => {
  if (props.profile.isAtLeastAdmin) await refresh();
});

</script>

<template>
  <div class="headerbar">
    <Popover ref="notificationPopover" :width="'min(80%, 400px)'" :height="'min(80%, 600px)'">
      <div style="padding: 10px; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
        <div v-if="notifications.length" style="overflow: auto; margin-bottom: 10px">
          <div class="notification-item" v-for="notification in notifications" :key="notification.id">
            <div class="notification-item-title" @click="notification.isCollapsed = !notification.isCollapsed">
              {{ notification.title }}
              <Button plain small tool :loading="notification.busy" :disabled="notification.busy" class="notification-read-button" @click.stop="onMarkNotificationRead(notification)">{{ $t('notifications.dismissTooltip') }}</Button>
            </div>
            <div class="notification-item-body" v-if="!notification.isCollapsed">
              <pre v-if="notification.messageJson" style="cursor: auto">{{ JSON.stringify(notification.messageJson, null, 4) }}</pre>
              <div v-else style="cursor: auto; overflow: auto;" v-html="marked.parse(notification.message)"></div>
            </div>
          </div>
        </div>
        <Button v-if="notifications.length" @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
        <div v-if="notifications.length === 0" class="notification-item-empty-placeholder">
          {{ $t('notifications.allCaughtUp') }}
        </div>
      </div>
    </Popover>

    <div v-if="!profile.isAtLeastUserManager">
      <a href="#/" class="headerbar-action">
        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`"/> {{ config.cloudronName || 'Cloudron' }}
      </a>
    </div>

    <div style="flex-grow: 1;"></div>

    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
      </span>
    </div>
    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
      <span class="badge badge-danger">Subscription Expired</span>
    </div>
    <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
    <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
    <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
  </div>
</template>

<style scoped>

.headerbar {
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 15px;
}

.headerbar-action {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--pankow-text-color);
  padding: 4px 15px;
}

.headerbar-action img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: var(--pankow-border-radius);
}

.headerbar-action:hover {
  color: var(--pankow-color-primary-hover);
}

.notification-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--pankow-input-border-color);
  position: relative;
}

.notification-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.notification-read-button {
  visibility: hidden;
  margin-right: 10px;
}

.notification-item:hover .notification-read-button {
  visibility: visible;
}

</style>
