<template>
    <MarkdownEditor
        :title="title"
        :markdown-text="markdownText"
        :markdown-config="contentData"
        mode="page"
        @update="onUpdate">
        <template v-slot:buttons>
            <ObjectPermissionsModal
                id="object-permissions-modal"
                v-model="showPermissions"
                :markdown-content="markdownText" />
            <b-button
                id="permissions-button"
                v-b-tooltip.hover.bottom
                v-b-modal:object-permissions-modal
                title="Permissions"
                variant="link"
                role="button"
                @click="showPermissions = true">
                <FontAwesomeIcon :icon="faUsers" />
            </b-button>
            <b-button
                id="save-button"
                v-b-tooltip.hover.bottom
                title="Save"
                variant="link"
                role="button"
                @click="saveContent(false)">
                <FontAwesomeIcon :icon="faSave" />
            </b-button>
            <b-button
                id="view-button"
                v-b-tooltip.hover.bottom
                title="Save & View"
                variant="link"
                role="button"
                @click="saveContent(true)">
                <FontAwesomeIcon :icon="faEye" />
            </b-button>
        </template>
    </MarkdownEditor>
</template>

<script>
import { faSave } from "@fortawesome/free-regular-svg-icons";
import { faEye, faUsers } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import BootstrapVue from "bootstrap-vue";
import Vue from "vue";

import { Toast } from "@/composables/toast";

import { save } from "./services";

import ObjectPermissionsModal from "./ObjectPermissionsModal.vue";
import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";

Vue.use(BootstrapVue);

export default {
    components: {
        MarkdownEditor,
        FontAwesomeIcon,
        ObjectPermissionsModal,
    },
    props: {
        pageId: {
            required: true,
            type: String,
        },
        publicUrl: {
            required: true,
            type: String,
        },
        title: {
            type: String,
            default: null,
        },
        content: {
            type: String,
            default: null,
        },
        contentData: {
            type: Object,
            default: null,
        },
    },
    data: function () {
        return {
            faEye,
            faSave,
            faUsers,
            markdownText: this.content,
            showPermissions: false,
        };
    },
    methods: {
        onUpdate(newContent) {
            this.markdownText = newContent;
        },
        saveContent(showResult) {
            save(this.pageId, this.markdownText, !showResult)
                .then(() => {
                    if (showResult) {
                        window.location = this.publicUrl;
                    }
                })
                .catch((error) => {
                    Toast.error(`Failed to save page: ${error}`);
                });
        },
    },
};
</script>
