<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="notif-detail-card">

      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6 text-violet-normal notif-detail-card__title" style="max-width: calc(100% - 48px)">
          {{ item.notification?.title }}
        </div>
        <q-space />
        <q-btn icon="mdi-close" flat round dense @click="handleClose" />
      </q-card-section>

      <q-separator class="q-mt-sm" />

      <q-card-section class="q-pt-md notif-detail-card__scroll">
        <div v-if="imageUrl && !imageError" class="notif-detail-card__image q-mb-md">
          <img :src="imageUrl" alt="" class="notif-detail-card__img" @error="imageError = true" />
        </div>

        <div class="text-body2 text-grey-8 notif-detail-card__message">
          {{ item.notification?.message }}
        </div>

        <div class="text-caption text-grey-5 q-mt-md">
          {{ formatDate(item.created_at) }}
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="q-pa-sm">
        <q-btn
          flat
          color="violet-normal"
          :label="$t('common.actions.close')"
          @click="handleClose"
        />
      </q-card-actions>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useDialogPluginComponent } from "quasar";
import { markNotificationAsReadAssociado } from "src/api/notification";
import { resolveNotificationImageUrl, formatNotificationDate } from "src/helpers/notification";

const props = defineProps({
  item: { type: Object, required: true },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
const { t } = useI18n();

const markedReadId = ref(null);
const imageError = ref(false);

const imageUrl = computed(() => resolveNotificationImageUrl(props.item.notification));

const formatDate = (dateStr) => formatNotificationDate(dateStr, t("common.terms.today"));

const handleClose = () => {
  onDialogOK(markedReadId.value);
};

onMounted(async () => {
  if (props.item.read) return;
  try {
    await markNotificationAsReadAssociado(props.item.id);
    markedReadId.value = props.item.id;
  } catch (e) {
    console.error(e);
  }
});
</script>

<style scoped lang="scss">
.notif-detail-card {
  width: 90vw;
  max-width: 600px;
  min-width: 300px;

  &__scroll {
    max-height: 65vh;
    overflow-y: auto;
  }

  &__title {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }

  &__image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f0e8f1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
  }

  &__message {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
}
</style>
