<template>
    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
        <div class="comment-body">
            <strong class="comment-author">{{ username }}</strong>
            <div class="comment-content" v-html="commentFormatted"></div>
        </div>
        <div class="comment-footer">
            <span v-show="!hover || !allowThread" class="comment-date">{{ dateFormatted }}</span>
            <comment-form v-show="hover"
                v-if="allowThread"
                v-bind:annotation="annotation"
                v-bind:reply-to="id"></comment-form>
        </div>
    </div>
</template>

<script>

    import showdown from 'showdown'

    const converter = new showdown.Converter({
        simpleLineBreaks: true
    })

    export default {
        components: ['comment-form'],
        props: [
            'id',
            'level',
            'comment',
            'username',
            'email',
            'date',
            'allowThread'
        ],
        data() {
            return {
                hover: false
            }
        },
        computed: {
            dateFormatted: function () {

                var date = new Date(this.date);

                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getFullYear();

                return day + '/' + month + '/' + year;
            },
            commentFormatted: function(){
              return converter.makeHtml(this.comment);
            }
        }
    }

</script>

<style scoped>
.comment {
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}
.comment-author {
    float: left;
    margin-right: 4px;
}
.comment-date {

}
.comment-footer {
    margin-top: 5px;
    color: #ccc;
}
</style>