<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import Swal from "sweetalert2";

const props = defineProps({
  notification: Object,
  reload: Function
});

const markAsRead = () => {
  console.log('Mark as read ' + props.notification.id);
  SessionUser.objects.notifications.delete(props.notification.id).then((response) => {
    props.reload();
  }).catch((error) => {
    Swal.fire(
      'Fejl',
      'Der skete en fejl ved markering af beskeden som læst. Prøv igen, eller kontakt support.',
      'error'
    )
    props.reload();
  })
};

const openLink = () => {
  console.log('Open link');
};

const hasLink = () => {
  return props.notification.data.link !== undefined;
};

const hasControls = () => {
  return props.notification.data.controls !== undefined;
};

const reload = () => {
  props.reload();
};

console.log(props.notification);
</script>

<template>
  <!-- Notification item -->
  <div class="list-item">
    <div class="list-item-content">
      <div class="list-item-title">{{ props.notification.data.title ?? (SessionUser.objects.global.language.no_data + ' ( ' + props.notification.type) + ' )'}}</div>
      <div class="list-item-description">{{ props.notification.data.description ?? SessionUser.objects.global.language.no_data }}</div>
    </div>
    <div class="list-item-controls">
      <button class="button is-small is-primary" v-if="hasLink()" @click="openLink">{{ SessionUser.objects.global.language.open }}</button>
      <button class="button is-small is-dark" @click="markAsRead">
        <span class="icon is-small">
          <i class="fas fa-check"></i>
        </span>
      </button>
    </div>
  </div>
</template>

<style scoped>

</style>