<template>
    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:class="commentClass">
        <div class="comment-body">
            <strong class="comment-author">{{ username }}</strong>
            <div class="comment-content" v-html="commentFormatted"></div>
        </div>
        <div class="comment-footer">
            <span class="comment-date">{{ dateFormatted }}</span>
        </div>

        <comment-form v-show="hover"
            v-if="allowThread"
            v-bind:annotation="annotation"
            v-bind:reply-to="id">
        </comment-form>
    </div>
</template>

<script>

    import showdown from 'showdown'
    import moment from 'moment'

    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: {
            commentClass: function(){
              var c = [];

              if (this.level > 0) {
                c = [ "comment-thread" ]
              }

              return c;
            },
            dateFormatted: function () {

              var date = moment(this.date); //.format("HH:mm DD/MM/YYYY");

              return date.fromNow();
            },
            commentFormatted: function(){
              return converter.makeHtml(this.comment);
            }
        }
    }

</script>

<style scoped>
.comment {
    font-size: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.comment-thread {
  border-bottom-width: 0px;
  border-left: 3px solid #ccc;
  padding-left: 10px;
  margin-left: 10px;
}

.comment-author {
    float: left;
    margin-right: 4px;
}
.comment-date {

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