<template>
    <div class="p-2">
        <div v-if="loading" >> Loading...</div>
        <div v-else>
            <div class="flex-between flex-center mb-1">
                <router-link to="/memos/" class="btn">< Back</router-link>
                <div class="relative">
                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                    <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
                    <div v-if="modal" class="absolute modal mt-2">
                        <p>Are you sure you want to delete this record ?</p>
                        <div class="flex-end flex-center mt-2">
                            <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
                            <button class="btn-alert-strong" @click="destroy"> Delete</button>
                        </div>
                    </div>
                </div>
                <div v-if="modal" class="modal-background" @click="modal = ! modal" />
            </div>
    <!--           <TagBox :memo="memo" />-->
            <h1 class="memo-title flex-center">{{ memo.name }}</h1>
            <p class="memo-style pt-1" v-html="memoMarkdown"></p>
            <div class="memo-change">@last update : {{ memo.last_updated }}</div>
        </div>
    </div>
</template>

<script>
    // import TagBox from "../Tag/TagBox";
    let MarkdownIt = require('markdown-it'),
        md = new MarkdownIt()
            .use(require('markdown-it-checkbox'));

    export default {
        name: 'MemoShow',
        components: {
            // TagBox
        },
        data: function () {
            return {
                loading: true,
                modal: false,
                memo: null,
            }
        },
        computed: {
            memoMarkdown: function () {
                return md.render(this.memo.memo)
            }
        },
        mounted() {
            axios.get('/api/memos/' + this.$route.params.id)
                .then(response => {
                    this.memo = response.data.data
                    this.loading = false
                })
                .catch(errorRes => {
                    this.loading = false
                    if (errorRes.response.status === 404) {
                        this.$router.push('/memos')
                    }
                })
        },
        methods: {
            destroy: function () {
                axios.delete('/api/memos/' + this.$route.params.id)
                    .then(response => {
                        this.$router.push('/memos')
                    })
                    .catch(errorRes => {
                        console.log('Internal Error, Unable to delete contact.' + errorRes)
                    })
            }
        }
    }
</script>
