<script lang="ts" setup>
import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
import DialogHeader from 'src/components/dialog/DialogHeader.vue';
import { CancelButton } from 'src/components/button';
import { ref } from 'vue';
import { Notification, useNotification } from 'src/stores/notification';
import { dateFormatJS } from 'src/utils/datetime';

const notificationStore = useNotification();
const open = defineModel<boolean>({ default: false, required: true });
const notiId = defineModel<string>('id', { default: '', required: true });

const noti = ref<Notification>();

function close() {
  open.value = false;
}

async function fetchNoti() {
  const res = await notificationStore.getNotification(notiId.value);
  if (res) {
    noti.value = res;
  }
}
</script>
<template>
  <DialogFormContainer
    width="60vw"
    height="350px"
    v-model="open"
    v-on:open="fetchNoti"
  >
    <template #header>
      <DialogHeader :title="$t('noti.title')" />
    </template>

    <section v-if="noti" class="q-pa-md col full-width">
      <article
        class="surface-1 rounded bordered q-pa-md full-height full-width"
      >
        <div class="text-bold">
          {{ noti.title }}
        </div>
        <div class="text-caption app-text-muted">
          {{
            dateFormatJS({
              date: noti.createdAt,
              monthStyle: 'long',
              withTime: true,
            })
          }}
        </div>
        <q-separator spaced="md" />
        <div class="text-caption">
          {{ noti.detail }}
        </div>
      </article>
    </section>

    <template #footer>
      <CancelButton
        class="q-ml-auto"
        :label="$t('general.close')"
        outlined
        @click="close"
      />
    </template>
  </DialogFormContainer>
</template>
