<template>
  <div class="chat--container">
    <!-- <h2> Conversation List </h2> -->

    <!-- <div>
      <h3>New Chat</h3>
      <select v-model="newChatRecipientId">
        <option />
      </select>
      <input type="text" v-model="newChatRecipientId" />
      <input type="button" value="Chat" v-on:click="newChat" />
    </div> -->
    <ChatList :chatEngine=chatEngine @loading="$emit('loading', $event)"/>
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import globals from '../components/dev/globals';

import ChatEngine from '../components/ChatEngine';
import ChatList from '../components/ChatList.vue';
import { Person } from '../components/type';
import { AuthenticationApi } from '@apsel/apsel-api-ts-axios';

@Component({
  components: {
    ChatList,
  },
})
export default class ChatConversationListView extends Vue {
  @Prop() private chatEngine!: ChatEngine;

  private newChatRecipientId: string = '';
  private userList: Person[] = [];

  public mounted() {
    // console.log('chat mounted with engine: ', this.chatEngine);


    this.listUsers();
  }

  public async listUsers() {
    
  }

  public async newChat() {
    try {
      const id = this.newChatRecipientId.trim();
      if (id.length > 10) {
        // Create a new chat
        this.$emit('loading', { state: true });
        const chat = await this.chatEngine.createChat(id);
        this.$emit('loading', { state: false });
        this.$root.$router.push({
          path: '/chat/' + chat.id,
        });
      }
    } catch (e) {
      console.error('Failed to create chat', e);
    }
  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
