<template>
  <div class="col-12" v-if="!commentHistory.deleted">
    <blockquote class="chill-user-quote">
      <button
        class="btn btn-sm bg-chill-red float-end text-white"
        @click="deleteComment"
      >
        <i class="bi bi-trash"></i>
      </button>
      <button
        class="btn btn-sm btn-edit mx-2 float-end text-white"
        @click="editCommentModal = true"
        style="top: 0.5rem; right: 0.5rem"
        v-if="canBeEdited && isOpen"
      />

      <p v-html="convertMarkdownToHtml(commentHistory.content)"></p>
    </blockquote>
  </div>
  <div class="col-12" v-else>
    <span class="ms-2 d-block text-center">
      {{ trans(CHILL_TICKET_TICKET_MASK_COMMENT_HINT) }}
      <button class="btn btn-primary btn-sm ms-2" @click="restoreComment">
        {{ trans(CANCEL) }}
      </button>
    </span>
  </div>
  <Modal
    v-if="editCommentModal"
    :show="editCommentModal"
    modal-dialog-class="modal-xl"
    @close="editCommentModal = false"
  >
    <template #header>
      <h5 class="modal-title">
        {{ trans(CHILL_TICKET_TICKET_EDIT_COMMENT_TITLE) }}
      </h5>
    </template>
    <template #body>
      <comment-editor v-model="editedComment" />
    </template>
    <template #footer>
      <button class="btn btn-save" @click="saveComment">
        {{ trans(SAVE) }}
      </button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { marked } from "marked";
import DOMPurify from "dompurify";

// Types
import { Comment } from "../../../../types";

// Components
import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
import Modal from "../../../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Modal.vue";

import {
  trans,
  SAVE,
  CHILL_TICKET_TICKET_EDIT_COMMENT_TITLE,
  CHILL_TICKET_TICKET_EDIT_COMMENT_SUCCESS,
  CHILL_TICKET_TICKET_MASK_COMMENT_SUCCESS,
  CHILL_TICKET_TICKET_MASK_COMMENT_HINT,
  CHILL_TICKET_TICKET_VISIBLE_COMMENT_SUCCESS,
  CANCEL,
} from "translator";
import { useToast } from "vue-toast-notification";

const props = defineProps<{ commentHistory: Comment }>();
const toast = useToast();
const store = useStore();
const isOpen = computed(() => store.getters.isOpen as boolean);
const canBeEdited = computed(() =>
  store.getters["canBeEdited"](props.commentHistory),
);
const editCommentModal = ref<boolean>(false);
const editedComment = ref<string>(props.commentHistory.content);

const saveComment = () => {
  store.dispatch("editComment", {
    id: props.commentHistory.id,
    content: editedComment.value,
  });
  editCommentModal.value = false;
  toast.success(trans(CHILL_TICKET_TICKET_EDIT_COMMENT_SUCCESS));
};

const deleteComment = () => {
  store.dispatch("deleteComment", props.commentHistory.id);
  store.commit("addRemovedCommentIds", props.commentHistory.id);
  editCommentModal.value = false;
  toast.success(trans(CHILL_TICKET_TICKET_MASK_COMMENT_SUCCESS));
};
const restoreComment = () => {
  store.dispatch("restoreComment", props.commentHistory.id);
  editCommentModal.value = false;
  toast.success(trans(CHILL_TICKET_TICKET_VISIBLE_COMMENT_SUCCESS));
};
const preprocess = (markdown: string): string => {
  return markdown;
};

const postprocess = (html: string): string => {
  DOMPurify.addHook("afterSanitizeAttributes", (node: Element) => {
    if ("target" in node) {
      node.setAttribute("target", "_blank");
      node.setAttribute("rel", "noopener noreferrer");
    }
    if (
      !node.hasAttribute("target") &&
      (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
    ) {
      node.setAttribute("xlink:show", "new");
    }
  });

  return DOMPurify.sanitize(html);
};

const convertMarkdownToHtml = (markdown: string): string => {
  marked.use({ hooks: { postprocess, preprocess } });
  const rawHtml = marked(markdown) as string;
  return rawHtml;
};
</script>

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