<template>
  <div class="chat">
    <image-preview
      :classNames="classNames"
      :previewImage="previewImage"
      v-if="showImagePreview"
      @close="closeImagePreview"
    />
    <chat-box
      :classNames="classNames"
      @selectedMessage="passData"
    />
    <send-message
      :classNames="classNames"
      :replyMessage="replyMessage"
      @nullifyReplyMessage="replyMessage = null"
      @preview="giveImageToChat"
    />
  </div>
</template>

<script>
import ChatBox from './../components/ChatBox'
import SendMessage from './../components/SendMessage'
import ImagePreview from './../components/ImagePreview'

export default {
  name: 'Chat',
  data () {
    return {
      defaultClassNames: {
        avatar: 'avatar',
        attachIcon: 'attach-icon',
        addMore: 'add-more',
        addIcon: 'add-icon',
        chatBox: 'chat-box',
        chatHeader: 'chat-header',
        contactList: 'contact-list',
        cancelIcon: 'cancel-icon',
        fileAttach: 'file-attach',
        imageAttach: 'image-attach',
        menu: 'menu',
        messageContainer: 'message-container',
        message: 'message',
        messageHeader: 'message-header',
        messageTitle: 'title',
        messageText: 'text',
        messageMenu: 'message-menu',
        messageTextArea: 'message',
        messageMetaData: 'message-meta-data',
        messageStatus: 'seen-icon',
        messageViewers: 'message-viewers',
        myMessage: 'my-message',
        moreIcon: 'more-icon',
        neutralStatus: 'neutral',
        otherMessage: 'other-message',
        onlineStatus: 'online',
        offlineStatus: 'offline',
        readByBox: 'read-by-box',
        roomInfo: 'room-info',
        roomName: 'room-name',
        roomStatus: 'status',
        roomEvent: 'room-event',
        replyMessageBox: 'reply-message-box',
        sendMessageContainer: 'send-message-container',
        sendMessage: 'send-message',
        selectedFileBox: 'selected-file-box',
        selectFiles: 'select-files',
        sendButton: 'send-button',
        showImages: 'show-images',
        viewersList: 'viewers-list',
        viewersImage: 'viewers-image'
      },
      headerAvatar: require('../assets/default-profile-image.svg'),
      replyMessage: null,
      previewImage: null,
      showImagePreview: false
    }
  },
  components: {
    ImagePreview,
    ChatBox,
    SendMessage
  },
  computed: {
    classNames () {
      const externalClassNames = this.externalClassNames || {}
      return Object.assign({}, this.defaultClassNames, externalClassNames)
    }
  },
  props: [
    'externalClassNames'
  ],
  methods: {
    passData (message) {
      this.replyMessage = message
    },
    giveImageToChat (image) {
      this.previewImage = image
      this.showImagePreview = true
    },
    closeImagePreview () {
      this.showImagePreview = false
    }
  }
}
</script>

<style lang="sass" scoped>
  @import "./../styles/global"
  .chat
    width: 100%
    height: 100%
    justify-self: stretch
    align-self: stretch
    display: grid
    grid-template-rows: 1fr auto
    background-color: $tertiary-color
</style>
