<template>
  <fragment>
      <div class="comments-container">
        <!-- div class="load-more-button">Load More</div -->

        <!-- Comment content -->
        <div class="comments-box">
          <div v-for="comment in comments" :key="comment.id" class="comment-box">
             <div class="avatar-box">
                <img :src="comment.user.avatar" class="avatar" style="background: #10dc60" />
              </div> 
              <div class="content-box">
                <div class="name">{{ comment.user.name }}{{ isMine(comment) ? ' (You)' : '' }}</div>
                <div v-if="comment.text" class="text">{{ comment.text }}</div>
                <div v-if="datetime" class="datetime">{{ datetime(comment) }}</div>
              </div> 
          </div>
        </div>

        <!-- New comment composer -->
        <div class="comment-composer-box">
          <ion-textarea 
            class="loc-textarea" placeholder="Type your comment..." rows="1" auto-grow="true" :value="newComment" 
            v-on:ionInput="$event => newComment = $event.target.value">
              <span class="loc-feature-send-icon" @click.stop="sendComment()">
                <span class="icon icon-messages"></span>
              </span>
          </ion-textarea>
        </div>

      </div>
  </fragment>
</template>

<script lang="ts">
import moment from 'moment';

export default {
  components: {
    
  },
  props: {
    isMeOwner: {
      type: Boolean,
      default: false,
    },
    me: {
      type: Object,
    },
    comments: {
      type: Array,
    },
  },
  data() {
    return {
      newComment: ''
    }
  },
  methods: {
    sendComment() {
      this.$emit('sendComment', {
        id: '-'+moment().unix(),
        text: this.newComment,
        tstamp: moment().unix(),
        type: 'forum_comment',
        user: {
          avatar: this.me.avatar,
          firstName: this.me.firstName,
          name: this.me.nickname,
          uid: this.me.uid
        }
      });
      this.newComment = '';
    },
    datetime(comment) {
      let commentTstamp = moment(comment).unix()*1000;
      return moment(commentTstamp).format('ddd D MMM hh:mm');
    },
    isMine(comment) {
      return comment.user.uid == this.me.uid;
    },
  },
}
</script>

<style scoped lang="css">
  .comment-box {
    width: 100%;
    display: flex;
  }
  .comment-box .avatar-box {
    width: 40px;
    margin-right: 10px;
  }
  .comment-box .avatar {
    display: block;
    height: 36px;
    width: 36px;
    margin-top: 4px;
    border-radius: 18px;
  }
  .comment-box .content-box {
    overflow: hidden;
    width: calc(100% - 60px);
  }
  .comment-box .content-box .name {
    font-weight: 500;
    margin-bottom: 6px;
  }
  .comment-box .content-box .text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px;
  }
  .comment-box .content-box .datetime {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 20px;
    float: right;
  }
  .loc-feature-send-icon {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
  }
  .loc-textarea {
    position: relative;
    margin: 9px 0px 9px 0px;
    border-radius: 19px;
    background: #fff;
    border: 1px solid #ddd;
    --padding-top: 10px;
    --padding-end: 50px;
    --padding-bottom: 9px;
    --padding-start: 15px !important;
    display: block; 
    min-height: 40px !important;
  } 
</style>