<template>
  <v-navigation-drawer :class="[!modelValue && 'transform']" v-model="modelValue" location="end" temporary width="400">
    <template #prepend>
      <v-toolbar color="transparent">
        <span class="ml-4 text-h6">{{ t('labels.notifications') }}</span>
        <v-badge v-if="unread" color="red" inline :content="unread" />
        <v-spacer />
        <v-btn variant="text" icon="close" @click="modelValue = false" />
      </v-toolbar>
      <v-divider />
    </template>
    <v-list>
      <template v-for="notification in notifications" :key="notification.timestamp">
        <v-list-item :prepend-avatar="notification.avatar" lines="two">
          <template #title>
            <div class="d-flex">
              <v-tooltip location="bottom" open-delay="1000">
                <template #activator="{ props }">
                  <span class="title" v-bind="props">{{ notification.title }}</span>
                </template>
                <span>{{ notification.title }}</span>
              </v-tooltip>
              <v-badge v-if="notification.isUnread" color="red" inline dot />
            </div>
          </template>
          <template #subtitle>
            <div class="d-flex">
              <span>{{ formatRelative(notification.timestamp, new Date()) }}</span>
              <v-spacer />
              <span>{{ formatDistance(notification.timestamp, new Date(), { addSuffix: true }) }}</span>
            </div>
          </template>
        </v-list-item>
        <v-divider />
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { formatDistance, formatRelative } from 'date-fns';
import { useI18n } from 'vue-i18n';

interface Props {
  notifications?: any[];
}

const props = withDefaults(defineProps<Props>(), {
  notifications: () => []
});

const { t } = useI18n();

const modelValue = defineModel<boolean>({ default: false });

const unread = computed(() => props.notifications.filter((n) => n.isUnread).length);
</script>

<style scoped lang="scss">
.v-navigation-drawer {
  top: 12px !important;
  bottom: 12px !important;
  right: 12px !important;
  height: auto !important;
  border-radius: 12px;

  &.transform {
    transform: translateX(412px) !important;
  }
}

.v-chip {
  padding: 8px 12px;
  height: unset !important;
  text-wrap: wrap !important;
  border-radius: 4px !important;
}

:deep(.v-list-item__prepend) {
  align-self: flex-start;
}

:deep(.v-list-item__append) {
  align-self: flex-start;
}

.title {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
