<template>
  <fragment>
    <reco-lazy-loading-list :isAllLoaded="isAllLoaded" v-on:loadNextPage="loadNextPage($event)" :avgHeight="80" :step="20">
      <ion-list>
        <reco-chat-message 
          v-for="(message, index) in messages" :key="message.id" 
          :isMeOwner="true" :isSenderParticipant="false" :isTempChat="false"
          :prevMessage="messages[index-1] ? messages[index-1] : null"
          :nextMessage="messages[index+1] ? messages[index+1] : null" 
          :message="message" 
          :me="{uid: 2, nickname: 'testj1@Test', avatar: 'https://firebasestorage.googleapis.com/v0/b/recomatetest.appspot.com/o/avatars%2F1566470305142_bridge-daylight-environment-775201.jpg?alt=media&token=7245a6f4-5e84-4736-8725-d01346a668fc'}" 
          :category="category"
          :comments="commentsObj[message.id] ? commentsObj[message.id] : []"
          @acceptRequest="acceptRequest" @rejectRequest="rejectRequest" @sendComment="sendComment($event)"
          @loadComments="loadComments($event)" @hideComments="hideComments($event)" @deleteMessage="deleteMessage($event)"
          @reportMessage="reportMessage($event)" />
      </ion-list>
    </reco-lazy-loading-list>
    <reco-forum-post-composer 
      v-on:sendForumPost="sendForumPost($event)" 
      :me="{ uid: 123, nickname: 'testuser', avatar: 'http://lorempixel.com/200/200/people/', location: { lat: 1.0, long: 2.0 }, gender: 'male', age: 25,birthday: '12/03/2000', languages: { post_language: 'hu' } }"
      :chat="chat"
      :isMeOwner="true"
    />
  </fragment>
</template>

<script>
import RecoLazyLoadingList from '@/components/complex/RecoLazyLoadingList.vue';
import RecoForumPostComposer from '@/components/complex/RecoForumPostComposer.vue';
import RecoChatMessage from '@/components/complex/RecoChatMessage.vue';
import Messages from '@/dummydb/forum_messages';
import Comments from '@/dummydb/forum_comments';
import Categories from '@/dummydb/categories';
import Chats from '@/dummydb/chats';

export default {
  components: {
    RecoLazyLoadingList,
    RecoForumPostComposer,
    RecoChatMessage,
  },
  data() {
    return {
      messages: Messages.chat1.slice(0, 20),
      isAllLoaded: false,
      category: Categories[0],
      commentsObj: {},
      chat: Chats[1]
    };
  },
  methods: {
    loadNextPage(e) {
      
    },
    sendForumPost(post) {
      console.log('POST: ', post);
    },
    acceptRequest(message) {
      console.log('ACCEPT: ', message);
    },
    rejectRequest(message) {
      console.log('REJECT: ', message);
    },
    loadComments({ messageId, nextCommentsPage }) {
      console.log('Details: ', { messageId, nextCommentsPage });
      this.$set(this.commentsObj, messageId, Comments);
    },
    hideComments({ messageId }) {
      console.log('Details: ', { messageId });
      this.$set(this.commentsObj, messageId, null);
    },
    sendComment({ comment, messageId }) {
      console.log('Comment deatails: ', { comment, messageId });
      this.commentsObj[messageId].push(comment);
    },
    deleteMessage(message) {
      console.log('DELETE MESSAGE: ', message);
    },
    reportMessage({ message, response }) {
      console.log('REPORT MESSAGE: ', { message, response });
    }
  },
}
</script>

<style scoped lang="css">
  
</style>