<template>
    <div>
        <div>{{ uuid }}</div>
        <div v-if="note">{{ note }}</div>
        <!-- html is sanitized -->
        <!-- eslint-disable-next-line -->
        <div class="container mx-auto" id="note" v-html="html"></div>
    </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import renderMarkdown from '@/utils/markdown'

export default {
    name: 'Note',
    data: () => ({
        note: {},
        html: '',
    }),
    computed: {
        ...mapState('notes', ['notes', 'isInitialized']),
        ...mapGetters('notes', ['find']),
        uuid() {
            return this.$route.params.uuid
        },
    },
    mounted() {
        if (!this.isInitialized) {
            this.load().then(() => {
                this.note = this.find(this.uuid)
                this.render()
            })
        } else {
            this.note = this.find(this.uuid)
            this.render()
        }
    },
    methods: {
        ...mapActions('notes', ['load']),
        render() {
            this.html = renderMarkdown(this.note.content).contents
        },
    },
}
</script>

<style>
#note h1 {
    @apply text-5xl font-bold;
}
</style>
