<template>
  <div>
    <div v-if="! comment.deactivated_at">
      <a class="questions__anchor" :id="'question__' + comment.id"></a>
      <div :id="'question__replyto__' + comment.id" :class="{'questions__item_reply': comment.parent && ! controller.isChat}" class="questions__item">

        <div v-if="comment.author.photo" class="questions__ava ava">
          <img class="ava__pic" :src="comment.author.photo">
        </div>

        <div v-if="! comment.author.photo" class="questions__ava ava">
          <img class="ava__pic" :src="$root.store.defaultUserPhoto">
        </div>

        <div class="questions__wrap">
          <div class="questions__details">
            <div class="questions__head">
              <span class="questions__author">{{ comment.author.first_name }} {{ comment.author.last_name }}</span>
              <span class="questions__date">{{ comment.created_at_humanize }}</span>
            </div>
            <div class="questions__content">
              <svg  v-if="isHeart" class="icon questions__heart"><use xlink:href="/static/img/sprite.svg#icon-like"></use></svg>
              <span v-if="! isHeart">{{ comment.content }}</span>
            </div>
          </div>
          <div class="questions__foot">
            <button @click="controller.reply(comment)" v-if="$root.store.user.id && ! controller.isChat" class="questions__action question__reply-button">ОТВЕТИТЬ</button>
            <button @click="controller.remove(comment)"
                    v-if="$root.store.user.id == comment.author.id || $root.store.user.role == $root.store.roles.ADMIN_ROLE"
                    class="questions__action question__reply-button">
              <span v-if="! controller.isChat">УДАЛИТЬ</span>
              <span v-if="controller.isChat">
                <svg class="icon questions__delete-icon"><use xlink:href="/static/img/sprite.svg#icon-delete"></use></svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <comment-form v-if="$root.store.user.id && !controller.$data.isChat && controller.$data.replyTo && controller.$data.replyTo.id == comment.id"
                  :controller="controller"></comment-form>

    <ul v-if="comment.children" v-for="(node, index) in comment.children" :key="index">
      <li>
        <comment v-if="! node.deactivated_at" :controller="controller" :comment="node"></comment>
      </li>
    </ul>
  </div>
</template>


<script>
    import CommentForm from './CommentForm';

    export default {
        name: 'comment',
        props: ['controller', 'comment',],
        computed: {
            isHeart(){
                return this.comment.content === '❤';
            },
        },
        mounted(){
            this.controller.flatComments[this.comment.id] = this.comment;
        },
        components: {
          CommentForm
        }
    }
</script>

