<template>
  <div class="chat--message-image">
    <div class="chat--message-image-content"
    v-on:click="preview()" >
      <MessageInfo :message=message />
      <div class="chat--message-image-overlay" 
      />
      <img :src="attachmentUrl" />
    </div>
   </div>
</template>

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

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

  private preview() {
    console.log(this.bus);
    this.bus.$emit('preview-image', 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>
