<template>
    <div v-show="annotation" class="wrapper">
        <div v-show="comments.length === 0" class="alert alert-info">Pas de commentaire pour le moment.</div>
        <comment
            v-for="comment in comments"
            v-bind:id="comment.id"
            v-bind:level="comment.level"
            v-bind:comment="comment.comment"
            v-bind:username="comment.user_name"
            v-bind:date="comment.submit_date"
            v-bind:allow-thread="comment.allow_thread"
            v-bind:is-authenticated="isAuthenticated"></comment>
    </div>
</template>

<script>

    import Comment from './Comment.vue'

    export default {
        props: ['annotation', 'fetch', 'is-authenticated'],
        components: {
            Comment
        },
        data() {
            return {
                'comments': []
            }
        },
        computed: {
            commentsURL: function() {
                return this.fetch.replace(':annotation_guid', this.annotation.annotation_guid);
            }
        },
        watch: {
            annotation: function(annotation) {
                if (annotation && annotation.annotation_guid) {
                    $.getJSON(this.commentsURL).then((comments) => this.comments = comments);
                } else {
                    this.comments = [];
                }
            }
        },
        mounted() {
            if (this.annotation) {
                $.getJSON(this.commentsURL).then((comments) => this.comments = comments);
            }
        }
    }

</script>

<style scoped>
.wrapper {
    height: auto;
    overflow-y: auto;
    margin-bottom: 20px;
}
.alert {
    padding: 10px;
    font-size: 12px;
}
</style>