<template>
  <div
    :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
    role="group"
    aria-label="Notification actions"
  >
    <button
      v-if="isRead"
      class="btn"
      :class="overrideClass"
      type="button"
      :title="trans(NOTIFICATION_MARK_AS_UNREAD)"
      @click="markAsUnread"
    >
      <i class="fa fa-sm fa-envelope-o"></i>
      <span v-if="!props.buttonNoText" class="ps-2">
        {{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
      </span>
    </button>

    <button
      v-if="!isRead"
      class="btn"
      :class="overrideClass"
      type="button"
      :title="trans(NOTIFICATION_MARK_AS_READ)"
      @click="markAsRead"
    >
      <i class="fa fa-sm fa-envelope-open-o"></i>
      <span v-if="!buttonNoText" class="ps-2">
        {{ trans(NOTIFICATION_MARK_AS_READ) }}
      </span>
    </button>

    <a
      v-if="isButtonGroup"
      type="button"
      class="btn btn-outline-primary"
      :href="showUrl"
      :title="trans(SEE)"
    >
      <i class="fa fa-sm fa-comment-o"></i>
    </a>

    <!-- "Mark All Read" button -->
    <button
      v-if="showMarkAllButton"
      class="btn"
      :class="overrideClass"
      type="button"
      :title="$t('markAllRead')"
      @click="markAllRead"
    >
      <i class="fa fa-sm fa-envelope-o"></i>
      <span v-if="!buttonNoText" class="ps-2">
        {{ $t("markAllRead") }}
      </span>
    </button>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
import {
  trans,
  NOTIFICATION_MARK_AS_READ,
  NOTIFICATION_MARK_AS_UNREAD,
  SEE,
} from "translator";

// Props
const props = defineProps({
  isRead: {
    type: Boolean,
    required: true,
  },
  notificationId: {
    type: Number,
    required: true,
  },
  buttonClass: {
    type: String,
    required: false,
  },
  buttonNoText: {
    type: Boolean,
    required: false,
  },
  showUrl: {
    type: String,
    required: false,
  },
});

// Emits
const emit = defineEmits(["markRead", "markUnread"]);

// Computed
const overrideClass = computed(() => props.buttonClass || "btn-misc");
const isButtonGroup = computed(() => props.showUrl);

// Methods
const markAsUnread = () => {
  makeFetch(
    "POST",
    `/api/1.0/main/notification/${props.notificationId}/mark/unread`,
    [],
  ).then(() => {
    emit("markRead", { notificationId: props.notificationId });
  });
};

const markAsRead = () => {
  makeFetch(
    "POST",
    `/api/1.0/main/notification/${props.notificationId}/mark/read`,
    [],
  ).then(() => {
    emit("markUnread", { notificationId: props.notificationId });
  });
};
</script>

<style lang="scss"></style>
