<template>
  <div class="chat--container">
    <h1>Chat View</h1>
    <div class="debug">
      <input type=text  />
      <select v-model=debugChatId>
        <option v-for="chat in debugChatList" :key="chat.id" :value="chat.id">{{chat.from.name}} to {{chat.to.name}} </option>
      </select>
      {{debugChatId}}
      <input ref="filepicker" type="file" v-on:change="handleFile" />
      <label>Your ID:
        {{userId}}
      </label>
      <button type="button"
        v-clipboard:copy="userId">Copy!</button>
    </div>  
    <router-view />
  </div>
</template>


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

import { FileApi, ChatApi, ChatNewMessage, ChatNewMessageTypeEnum, ChatInfo } from '@apsel/apsel-api-ts-axios';
import axios from 'axios';

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

  private userId = '';

  private debugChatId: string = '';
  private debugChatList: ChatInfo[] = [];

  /** DEBUG FILE UPLOAD */
  public async handleFile() {
    const filepicker = (this.$refs.filepicker as HTMLInputElement);
    console.log('FILE PICKED');
    console.log( filepicker.files!.length );

    if (filepicker.files && filepicker.files.length > 0) {
      const file = filepicker.files[0];

      console.log(file);

      const fileapi = new FileApi({
        accessToken: this.chatEngine.accessToken,
        basePath: '',
      });
      const chatapi = new ChatApi({
        accessToken: this.chatEngine.accessToken,
        basePath: '',
      });

      // -------------
      const message = {
        type: ChatNewMessageTypeEnum.Image,
        content: "hello",
      } as ChatNewMessage
      console.info('BEFORE POST 3');
      const r = await chatapi.createMessageFile(this.debugChatId, message, file);
      console.info('AFTER POST 3', r);

      // // ------------------------------------------
      // // THIS WORKS
      // console.info('BEFORE POST');
      const formData = new FormData();
      formData.append('message', JSON.stringify({
        type: 'image',
        content: 'hello',
      }));
      // formData.append('file', file);

    }
  }

  public async debugLoadChatList() {
    // debug load chat list
    const chatapi = this.chatEngine.chatApi;
    this.debugChatList = (await chatapi.listChat()).data.chats;
  }

  public mounted() {
    this.userId = this.chatEngine.userId;

    this.chatEngine!.start();


    this.debugLoadChatList();
  }

  public beforeDestroy() {
    this.chatEngine!.stop();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .chat--container {
    .debug {
      position: fixed;
      top: 0;
      right: 0;
      font-size: 0.3 rem;
      background-color: #fcf6a4;
      border: 1px solid  #fab92e;
      padding: 3px;
    }
  }
</style>
