<template>
    <v-card>
        <v-toolbar
            flat
            color="secondary"
            class="mt-12"
            dark
        >
            <v-toolbar-title>Create a note</v-toolbar-title>
        </v-toolbar>


        <v-form
            ref="form"
            v-model="valid"
            lazy-validation
        >
            <v-card-text>
                <v-text-field label="Title" v-model="form.title" outlined value="My new note"></v-text-field>

                <v-combobox
                    outlined
                    v-model="form.tags"
                    :items="possibleTags"
                    :delimiters="delimiters"
                    label="Tags"
                    multiple
                    chips
                    deletable-chips
                ></v-combobox>

            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="success"
                    depressed
                    @click="createNote"
                >
                    Create
                </v-btn>
            </v-card-actions>
        </v-form>
    </v-card>
</template>

<script>
    export default {
        name: "create",
        data: () => ({
            delimiters: [" ", ","],
            form: {
                title: '',
                tags: []
            },
            possibleTags: []
        }),
        methods: {
            createNote() {
                this.$axios.post(`/notes/${this.form.title}`, {
                    tags: this.form.tags
                }).then(data => {
                        console.log(data)
                    }
                ).catch(e => {
                    console.log(e)
                })

            }
        },
        mounted() {
            this.$axios.get("/tags")
                .then(e => console.log(e.data))
        }
    }
</script>

<style scoped>

</style>
