<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'],

        components: {

            'tag-list': TagList

        },

        data() {

            return {

                'title': '',

                'description': '',

                'fragment': '',

                'tags': [],

                'annotation': null,

            }

        },

        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: {

            setAnnotation: function(annotation) {

                const clone = annotation;

                this.annotation = clone;

                Object.assign(this, annotation);

            },

            onTagsChange: function(tags) {

                this.tags = tags;

            },

            reset: function() {

                Object.assign(this, {

                    'title': '',

                    'description': '',

                    'tags': [],

                    'annotation': null

                });

            },

            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>