<template>
  <div class="questions__form" :class="{'questions__item_reply': controller.$data.replyTo}">
    <div class="questions__form-loader loading-loader"></div>
    <div class="questions__ava ava">
      <img class="ava__pic" :src="$root.store.user.photo || $root.store.defaultUserPhoto">
    </div>
    <div class="questions__wrap">
      <div class="questions__field">
        <textarea v-model="content" class="questions__textarea" @keyup.enter.exact="addOnEnter"
                  :placeholder="controller.$data.replyTo ? 'Ответ на комментарий' : 'Ваш комментарий или вопрос'"></textarea>
      </div>
      <div class="questions__form-foot">
        <button v-if="controller.isChat" class="questions__btn"
                @click="controller.addHeart"><svg class="icon questions__heart"><use xlink:href="/static/img/sprite.svg#icon-like"></use></svg></button>
        <button class="questions__btn"  :class="{'btn btn_light': ! controller.isChat}" @click="add">
          <span :class="{'mobile-hide': controller.isChat }">ОТПРАВИТЬ</span>
          <span class="mobile-show" v-if="controller.isChat">
            <svg class="icon questions__send-icon"><use xlink:href="/static/img/sprite.svg#icon-plus"></use></svg>
          </span>
        </button>
        <button v-show="! controller.isChat && controller.$data.replyTo" class="questions__btn" @click="controller.cancelReply">
          <span>ОТМЕНИТЬ</span>
        </button>
      </div>
    </div>
  </div>
</template>


<script>
    import {api} from "../js/modules/api";

    export default {
          name: 'comment-form',
          props: ['controller',],
          data() {
              return {
                  content: '',
              }
          },
          methods: {
              addOnEnter() {
                  if(this.controller.isChat) {
                      this.add();
                  }
              },
              add() {
                  this.controller.add(this.content);
                  this.content = '';
              },
          }
    }
</script>
