<template>
    <div class="blog-edit">
        <container>
            <div class="blog-links">
                <a href="javascript:void(0)" @click="gotoArticle" v-if="!!this.id"><i class="fas fa-eye"></i> View Article</a>
                <a href="javascript:void(0)" @click="publishArticle(true)" v-if="!this.published && !!this.id"><i class="fas fa-check"></i> Publish Article</a>
                <a href="javascript:void(0)" @click="publishArticle(false)" v-else-if="!!this.id"><i class="fas fa-times"></i> Unpublish Article</a>
            </div>
            <div class="article-form">
                <input type="text" v-model="title">
                <markdown-editor ref="editor" :render="false" @update:html="html = $event" @save="save" :rows="20"></markdown-editor>
            </div>
            <div class="article-render">
                <h1>{{ this.title }}</h1>
                <div v-html="html"></div>
            </div>
        </container>
    </div>
</template>

<script>
import Container from "../components/Container.vue";
import MarkdownEditor from "../components/MarkdownEditor";

export default {
    components: {
        Container,
        MarkdownEditor,
    },
    data() {
        return {
            html: "",
            title: "",
            published: null,
            errors: null,
        };
    },
    props: {
        id: undefined,
    },
    mounted() {
        if (!!this.id) {
            axios.get(`/api/blog/${this.id}`)
                .then(res => {
                    this.$refs.editor.setContent(res.data.content, false);
                    this.published = res.data.published;
                    this.title = res.data.title;
                });
        }
    },
    methods: {
        save(markdown) {
            console.log(markdown);
            if (!!this.id) {
                // Update existing post
                axios.put(`/api/blog/${this.id}`, {
                    title: this.title,
                    content: markdown,
                })
                    // It returns a 204 - No content if successful, so no need for a `.then()`
                    .catch(error => {
                        this.errors = error.errors;
                    });
            } else {
                // Store new post
                axios.post('/api/blog', {
                    title: this.title,
                    content: markdown,
                })
                    .then(res => {
                        this.$router.push({ name: 'blog-article-edit', params: { id: res.data.id }});
                    })
                    .catch(error => {
                        this.errors = error.errors;
                    });
            }
        },
        gotoArticle() {
            this.$router.push({ name: 'blog-article', params: { id: this.id }});
        },
        publishArticle(state) {
            axios.post(`/api/blog/${this.id}/publish`, {
                published: state,
            })
                .then(() => {
                    this.published = !this.published;
                });
        },
    },
    beforeRouteLeave(to, from, next) {
        if (this.$refs.editor.canRouteChange()) {
            next();
        } else {
            next(false);
        }
    }
}
</script>
