<template>
    <div>
        <b-card class="mt-3" header="Create a note">
            <b-form @submit.prevent="createNote">

                <b-form-group id="title-group" label="Title:" label-for="title">
                    <b-form-input
                            id="title"
                            size="lg"
                            v-model="form.title"
                            required
                            placeholder="Enter a title"
                            add-on-change
                    ></b-form-input>
                </b-form-group>

                <b-form-group id="tags-group" label="Tags:" label-for="tags">
                    <b-form-tags
                            input-id="tags"
                            v-model="form.tags"
                            tag-variant="primary"
                            separator=" ,;"
                            remove-on-delete
                            class="mb-2"
                    ></b-form-tags>
                </b-form-group>

                <b-form-group id="content-group" label="Note:" label-for="content">
                    <b-form-textarea
                            id="content"
                            v-model="form.content"
                            placeholder="Enter something..."
                            rows="3"
                            max-rows="50"
                            required
                    ></b-form-textarea>
                </b-form-group>

                <b-button type="submit" variant="primary">Submit</b-button>
            </b-form>

            <b-alert :show="error" variant="danger" dismissible class="mt-3">
                An error occurred while creating note
            </b-alert>

        </b-card>
    </div>
</template>

<script>
    import Api from '@/api'

    export default {
        name: "NoteCreationForm",
        data() {
            return {
                form: {
                    title: '',
                    content: '',
                    tags: []
                },
                error: false,
            }
        },
        methods: {
            createNote() {
                this.error = false

                Api.post('/notes', {
                    title: this.form.title,
                    content: this.form.content,
                    tags: this.form.tags
                })
                    .then(response => {
                        console.log(response)
                    })
                    .catch(error => {
                        console.log(error)
                        this.error = true
                    })
            }
        }
    }
</script>
