<template>

    <form>
        <button @click="close" type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="form-group" v-bind:class="titleFormGroupClass" style="clear: both;">
            <label class="control-label">Titre</label>
            <input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court" @input="titleError = false">
            <span class="help-block small" v-show="titleError">Vous devez spécifier un titre</span>
        </div>
        <div class="form-group">
            <label class="control-label">Description</label>
            <textarea name="description" v-model="description" class="form-control input-sm" placeholder="Décrivez ce que vous voyez"></textarea>
        </div>
        <div class="form-group" v-bind:class="tagsFormGroupClass">
            <label class="control-label">Mots-clés</label>
            <tag-list ref="taglist" v-bind:original-tags="originalTags" @change="tagsError = false"></tag-list>
            <span class="help-block small" v-show="tagsError">Vous devez spécifier au moins un mot-clé</span>
        </div>
        <button @click="save" class="btn btn-block btn-sm btn-primary">Valider</button>
    </form>

</template>

<script>

    import TagList from '../tagform/TagList.vue'

    export default {
        props: [
            'original-title',
            'original-description',
            'original-tags'
        ],
        components: {
            'tag-list': TagList
        },
        data() {
            return {
                title: '',
                description: '',
                tags: [],
                titleError: false,
                tagsError: false
            }
        },
        computed: {
            titleFormGroupClass: function() {
                return {
                    'has-error': this.titleError
                }
            },
            tagsFormGroupClass: function() {
                return {
                    'has-error': this.tagsError
                }
            }
        },
        mounted() {
            if (this.originalTitle) {
                this.title = this.originalTitle;
            }
            if (this.originalDescription) {
                this.description = this.originalDescription;
            }
        },
        methods: {
            close: function(e) {
                e.preventDefault();
                this.$emit('close');
            },
            save: function(e) {
                e.preventDefault();

                Object.assign(this, {
                    titleError: false,
                    tagsError: false,
                });
                if (this.title.trim().length === 0) {
                    this.titleError = true;
                }
                if (this.$refs.taglist.tags.length === 0) {
                    this.tagsError = true;
                }
                if (this.titleError || this.tagsError) {
                    return;
                }

                this.$emit('save', {
                    title: this.title,
                    description: this.description,
                    tags: this.$refs.taglist.tags
                });
            }
        }
    }

</script>

<style>
.popover {
    min-width: 300px;
}
.popover-content .form-group {
    margin-bottom: 10px;
}
.popover-content .form-group label {
    font-size: 12px;
}
.popover-content .taglist {
    margin: 10px 0 15px;
}
</style>