<template>

    <div>

        <button v-if="annotation && isAuthenticated" @click="readonly = !readonly"

            class="btn btn-xs pull-right"

            v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }">

            <i class="fa fa-edit" v-if="readonly"></i>

            <span v-if="readonly">Modifier</span>

            <i class="fa fa-ban" v-if="!readonly"></i>

            <span v-if="!readonly">Annuler</span>

        </button>

        <div v-if="!annotation" class="alert alert-warning text-center">

            Aucune annotation sélectionnée.

        </div>

        <form v-bind:action="formAction" method="post">

            <slot>

                <!-- CSRF token -->

            </slot>

            <input type="hidden" name="fragment" v-model="fragment">

            <div v-if="annotation" class="form-group form-group-sm">

                <label v-if="!readonly || title" class="small text-muted">Titre</label>

                <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly">

                <p v-if="readonly && title" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p>

            </div>

            <div v-if="annotation" class="form-group form-group-sm">

                <label v-if="!readonly || description" class="small text-muted">Description</label>

                <textarea class="form-control" name="description" v-model="description" v-if="!readonly" placeholder="Décrivez ce que vous voyez"></textarea>

                <p v-if="readonly && description" v-bind:class="{ 'text-muted': !description }" v-html="descriptionComputed">{{ descriptionComputed || 'Pas de description' }}</p>

            </div>

            <div v-if="annotation" class="form-group form-group-sm">

                <label class="small text-muted">Mots-clés</label>

                <tag-list ref="taglist"

                    v-bind:original-tags="annotation.tags"

                    v-bind:readonly="readonly"

                    @change="onTagsChange($event.tags)"></tag-list>

                <input type="hidden" name="tags" v-model="serializedTags">

            </div>

            <button type="submit" v-if="annotation &amp;&amp; !readonly" v-bind:class="{ disabled: !hasChanged }"

                class="btn btn-block btn-sm btn-primary">Enregistrer une nouvelle version</button>

        </form>

    </div>

</template>

<script>

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

    import _ from 'lodash'

    import showdown from 'showdown'

    const converter = new showdown.Converter()

    var defaults = {

        title: '',

        description: '',

        fragment: '',

        tags: [],

        readonly: true,

    }

    export default {

        props: {

            action: String,

            annotation: {

                type: Object,

                default: function () {

                    return null;

                }

            },

            isAuthenticated: {

                type: Boolean,

                default: false

            }

        },

        components: {

            'tag-list': TagList

        },

        data() {

            return defaults;

        },

        watch: {

            annotation: function(annotation) {

                if (annotation) {

                } else {

                    this.reset();

                }

            }

        },

        computed: {

            descriptionComputed: function(){

              return converter.makeHtml(this.description);

            },

            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;

    clear: both;

}

label {

  font-weight: normal;

}

</style>