<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:original-tags="annotation.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'

    import _ from 'lodash'

    var defaults = {

        'title': '',

        'description': '',

        'fragment': '',

        'tags': [],

    }

    export default {

        props: ['action', 'annotation'],

        components: {

            'tag-list': TagList

        },

        data() {

            return defaults;

        },

        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);

            },

            hasChanged: function() {

                if (!this.annotation) { return false; }

                return this.title !== this.annotation.title

                    || this.description !== this.annotation.description

                    || !_.isEqual(this.annotation.tags, this.tags);

            }

        },

        methods: {

            onTagsChange: function(tags) {

                this.tags = tags;

            },

            reset: function() {

                Object.assign(this, defaults);

            },

        }

    }

</script>

<style scoped>

form {

    margin-bottom: 20px;

}

</style>