<template>
    <form v-bind:action="formAction" method="post">
        <slot>
            <!-- CSRF token -->
        </slot>
        <input type="hidden" name="fragment" v-model="fragment">
        <div v-if="!annotation" class="alert alert-warning">
            Aucune annotation sélectionnée.
        </div>
        <div v-if="annotation" class="form-group form-group-sm">
            <label class="control-label">Titre</label>
            <input type="text" class="form-control" name="title" v-model="title">
        </div>
        <div v-if="annotation" class="form-group form-group-sm">
            <label class="control-label">Description</label>
            <textarea class="form-control" name="description" v-model="description"></textarea>
        </div>
        <div v-if="annotation" class="form-group form-group-sm">
            <label class="control-label">Mots-clé</label>
            <tag-list ref="taglist" v-bind:tags="tags" @change="onTagsChange($event.tags)"></tag-list>
            <input type="hidden" name="tags" v-model="serializedTags">
        </div>
        <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged() }"
            class="btn btn-block btn-sm btn-primary">Sauvegarder</button>
    </form>
</template>

<script>

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

    export default {
        props: ['action', 'annotation'],
        components: {
            'tag-list': TagList
        },
        data() {
            return {
                'title': '',
                'description': '',
                'fragment': '',
                'tags': [],
            }
        },
        watch: {
            annotation: function(annotation) {
                if (annotation) {
                    // Make sure we have an actual copy
                    Object.assign(this, {
                        'title': annotation.title,
                        'description': annotation.description,
                        'fragment': annotation.fragment,
                        'tags': annotation.tags.slice()
                    });
                } else {
                    this.reset();
                }
            }
        },
        computed: {
            formAction: function() {
                if (this.annotation) {
                    return this.action.replace(':annotation_guid', this.annotation.annotation_guid);
                }
            },
            serializedTags: function() {
                var tags = this.tags.map(function(tag) {
                    return {
                        tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
                        tag_label: tag.tag_label,
                        accuracy: tag.accuracy,
                        relevancy: tag.relevancy
                    }
                });

                return JSON.stringify(tags);
            }
        },
        methods: {
            onTagsChange: function(tags) {
                this.tags = tags;
            },
            reset: function() {
                Object.assign(this, {
                    'title': '',
                    'description': '',
                    'fragment': '',
                    'tags': []
                });
            },
            hasChanged: function() {
                if (!this.annotation) { return false; }

                return this.title !== this.annotation.title
                    || this.description !== this.annotation.description
                    || this.tags !== this.annotation.tags;
            }
        }
    }

</script>

<style scoped>
form {
    margin-bottom: 20px;
}
</style>