<template>
    <h2 class="link" @click="openForum()">{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
    <h3 v-if="forumTopic">{{ forumTopic }}</h3>
    <ul class="messages">
        <li v-for="message in messages">
            <div v-html="message.text"></div>
            <div class="footer">
                <span class="link" @click="openProfile(message.lastMessageUser.hashedId)">{{
                    message.lastMessageUser.username }}</span>
                <span>{{ new Date(message.createdAt).toLocaleString() }}</span>
            </div>
        </li>
    </ul>
    <editor v-model="newContent" :init="tinymceInitOptions" :api-key="apiKey"
        tinymce-script-src="/tinymce/tinymce.min.js"></editor>
    <button @click="saveNewMessage">{{ $t('socialnetwork.forum.createNewMesssage') }}</button>
</template>

<script>
import apiClient from '../../utils/axios';
import TinyMCEEditor from '@tinymce/tinymce-vue';

export default {
    name: 'ForumTopicView',
    components: {
        editor: TinyMCEEditor,
    },
    data() {
        return {
            forumTopicId: String,
            forumTopic: null,
            forumName: null,
            forumId: 0,
            newContent: '',
            apiKey: import.meta.env.VITE_TINYMCE_API_KEY ?? '',
            tinymceInitOptions: {
                script_url: '/tinymce/tinymce.min.js',
                height: 300,
                menubar: true,
                plugins: [
                    'lists', 'link',
                    'searchreplace', 'visualblocks', 'code',
                    'insertdatetime', 'table'
                ],
                toolbar:
                    'undo redo cut copy paste | bold italic forecolor backcolor fontfamily fontsize| \
                    alignleft aligncenter alignright alignjustify | \
                    bullist numlist outdent indent | removeformat | link visualblocks code',
                contextmenu: 'link image table',
                menubar: 'edit format table',
                promotion: false,
            },
        }
    },
    async mounted() {
        this.forumTopicId = this.$route.params.id;
        this.loadForumTopic();
    },
    methods: {
        async loadForumTopic() {
            try {
                console.log(this.forumTopicId);
                const url = `/api/forum/topic/${this.forumTopicId}`;
                console.log('url', url);
                const response = await apiClient.get(url);
                this.setContent(response.data);
            } catch (error) {
                console.error(error);
            }
        },
        setContent(responseData) {
            this.forumTopic = responseData.title;
            this.forumName = responseData.forum.name;
            this.forumId = responseData.forum.id;
            this.messages = responseData.messages;
        },
        async openProfile(id) {
            this.$root.$refs.userProfileDialog.userId = id;
            this.$root.$refs.userProfileDialog.open();
        },
        async saveNewMessage() {
            try {
                const url = `/api/forum/topic/${this.forumTopicId}/message`;
                const response = await apiClient.post(url, {
                    content: this.newContent,
                });
                this.newContent = '';
                this.setContent(response.data);
            } catch (error) {
                console.error(error);
            }
        },
        openForum() {
            this.$router.push(`/socialnetwork/forum/${this.forumId}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.messages {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.messages > li {
    border: 1px solid #7BBE55;
    margin-bottom: 0.25em;
    padding: 0.5em;
}

.messages > li > .footer {
    color: #F9A22C;
    font-size: 0.7em;
    margin-top: 0.5em;
    display: flex;
}

.messages>li>.footer>span:first-child {
    flex: 1;
}

.messages > li > .footer > span:last-child {
    text-align: right;
}
</style>