<template>
  <div class="chat--message-document">
    <div class="chat--message-document-preview" @click="preview()">
      <img  />
      <div class="chat--message-document-download">
        <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
          <path id="wqeqwrewa" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"/></defs><g transform="translate(-4 -4)" fill="none" fill-rule="evenodd">
            <mask id="wqeqwrewb" fill="#fff"><use xlink:href="#wqeqwrewa"/></mask><g mask="url(#wqeqwrewb)" fill="#FFF"><path d="M-13-13h50v50h-50v-50z"/></g></g></svg>
       </div>
    </div>
    <div class="chat--message-text-content">
      <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" id="gfhhfgda"/></defs><g transform="translate(-4 -2)" fill="none" fill-rule="evenodd"><mask id="gfhhfgdb" fill="#fff"><use xlink:href="#gfhhfgda"/></mask><g mask="url(#gfhhfgdb)" fill="#4A4A4A"><path d="M-13-13h50v50h-50v-50z"/></g></g></svg>
      <span>
      {{ message.content }}
      </span>
    </div>
    <MessageInfo :message=message />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message } from './type';
import MessageInfo from './MessageInfo.vue';
import ChatEngine from './ChatEngine';
import Chat from './Chat.vue';

@Component({
  components: {
    MessageInfo,
  },
})
export default class MessageDocument extends Vue {
  @Prop() private message!: Message;
  // The Chat engine
  @Prop() private chatEngine!: ChatEngine;
  // The chat
  @Prop() private bus!: Chat;

  private preview() {
    this.bus.$emit('preview-document', this.message);
  }

  get attachmentUrl() {
    // RULE: New message don't have a 'path' (len 0) but they have an objectUrl
    if (this.message.attachment && this.message.attachment.length > 0) {
      return this.chatEngine.urlForAttachment( this.message.attachment[0] );
    }
    return '';
  }
}
</script>

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

</style>
