<template>
    <v-col cols="12">
        <v-card color="secondary">
            <v-card-title class="text-center justify-center py-6">
                <h1 class="font-weight-bold headline white--text">
                    Create a note
                </h1>
                <v-spacer />
                <v-switch v-model="preview"></v-switch>
            </v-card-title>
            <v-card flat>
                <v-card-text>
                    <v-textarea
                        v-if="!preview"
                        v-model="text"
                        autocapitalize="off"
                        autocomplete="off"
                        spellcheck="false"
                        autocorrect="off"
                        label="Text"
                        auto-grow
                    ></v-textarea>
                    <client-only v-else>
                        <!-- html is sanitized -->
                        <!-- eslint-disable-next-line -->
                        <div class="html" v-html="html" />
                    </client-only>
                </v-card-text>
            </v-card>
        </v-card>
    </v-col>
</template>

<script>
import markdown from '~/utils/markdown'

export default {
    name: 'Create',
    data: () => ({
        delimiters: [' ', ','],
        form: {
            title: '',
            tags: [],
        },
        text: '',
        possibleTags: [],
        conflict: false,
        preview: false,
    }),
    computed: {
        html() {
            return markdown(this.text)
        },
    },
    mounted() {
        this.$axios.get('/tags').then((e) => (this.possibleTags = e.data))
    },
    methods: {
        createNote() {
            this.conflict = false
            this.$axios
                .post(`/notes/${this.form.title}`, {
                    tags: this.form.tags,
                })
                .then((_) => {
                    this.$router.push('/notes')
                })
                .catch((e) => {
                    if (e.response && e.response.status === 409) {
                        this.conflict = true
                    }
                })
        },
    },
}
</script>

<style>
.html h1 {
    margin-bottom: 0.5em;
}
</style>
