<template>
  <div class="apselui chat--list">
    <!-- <h1>Chat list {{chats.length}}</h1> -->
    <!-- <div 
      v-if="(chats.length == 0) && !loading"
      class="chat--list__empty empty-message"> -->
    <div
      v-if="(chats.length == 0) && !loading"
      class="empty-message">
      <template v-if="$root.$emptyQuotes">
        <!-- You don't have any chat at this time. -->
        <span v-html="$root.$emptyQuotes[ Math.floor( Math.random() * ($root.$emptyQuotes.length - 1) ) ]" />
      </template>
      <template v-else>
        You don't have any chat
      </template>
    </div>
    <a
      @click.prevent.stop="$root.$router.push('/chat/'+chat.id)"
      class="router-link"
      :href="'/chat/'+chat.id"
      v-for="(chat, index) in chats"
      v-bind:key="chat.id">
        <chatListItem
          :chatEngine=chatEngine
          :class="[(index == chats.length-1) ? 'no-border' : '']"
          v-bind:key="chat.id"
          :chatInfo="chat"/>
    </a>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import ChatEngine from './ChatEngine';
import { ChatInfoList, ChatInfo } from '@apsel/apsel-api-ts-axios';
import chatListItem from './chatListItem.vue';

@Component({
  components: {
    chatListItem
  },
})
export default class chats extends Vue {

  @Prop() private chatEngine!: ChatEngine;

  // private chatLisxt: ChatInfoList = { chats: [] };
  private chats: any = [];
  private loading: Boolean = true;

  public async load() {
    this.loading = true;
    this.$emit('loading', { state: true });
    const clist = await this.chatEngine.loadChatList();
    this.loading = false;
    this.$emit('loading', { state: false });
    if (clist) {
      // this.chatList = clist;
      this.chats.length = 0;
      this.chats = clist.chats;
      console.info('[chats] List of chat loaded', this.chats);
    }
  }

  public mounted() {
    // Load the list of chat
    this.$nextTick( () => this.load() );
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.chat--list__empty {
  height: 100px;
  // line-height: 100px;
  text-align: center;
}
</style>
