<template>
  <fragment>
    <!-- 
      Continue here with bottom scroll !!!
      AAAAAND ANAAAAA LOVES YOUUU !!!!
      <3 <3 <3
     -->
    <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}" :category="category"
          @acceptRequest="acceptRequest" @rejectRequest="rejectRequest" />
      </ion-list>
    </reco-lazy-loading-list>
    <reco-chat-message-composer v-on:sendMessage="sendMessage($event)"
    v-on:inputFocus="onInputFocus()" />
  </fragment>
</template>

<script>
import RecoLazyLoadingList from '@/components/complex/RecoLazyLoadingList.vue'
import RecoChatMessageComposer from '@/components/complex/RecoChatMessageComposer.vue'
import RecoChatMessage from '@/components/complex/RecoChatMessage.vue'
import Messages from '@/dummydb/messages'
import Categories from '@/dummydb/categories'

export default {
  components: {
    RecoLazyLoadingList,
    RecoChatMessageComposer,
    RecoChatMessage,
  },
  data() {
    return {
      messages: Messages.chat1.slice(0, 20),
      isAllLoaded: false,
      category: Categories[0]
    };
  },
  methods: {
    loadNextPage(e) {
      
    },
    sendMessage(message) {
      console.log(message);
    },
    acceptRequest(message) {
      console.log('ACCEPT: ', message);
    },
    rejectRequest(message) {
      console.log('REJECT: ', message);
    },
    onInputFocus(){
      console.log('input is focused');
    }
  },
}
</script>

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