<template>
  <div>
    <base-message
      v-show="!isEdit"
      v-bind="$attrs"
      v-on="$listeners"
      @mouseenter="isHover = true"
      @mouseleave="isHover = false"
      @show-overlay="isShowOverlay = true"
      @hide-overlay="isShowOverlay = false"
      :title="messageTitle"
      :subtitle="message.createdAt | humanizeDate"
      :text="message.body"
      :class="{ 'sms-message': isSms }"
    >
      <template #left-panel>
        <template v-if="isClientMessage">
          <client-avatar v-if="client" :tooltip="client.fullName" />
        </template>
        <ui-user-avatar v-else :user="manager" size="32px" />
      </template>
      <template #after-text>
        <message-media-files
          v-if="attachedMediaFiles.length > 0"
          @show-file="setCurrentFile"
          :message="message"
          :files="attachedMediaFiles"
          class="q-mt-md"
        />
        <message-files
          :message="message"
          :files="attachedFiles"
          class="q-mt-md"
        />
        <ui-image-viewer
          v-if="currentFileIndex !== null"
          @close="currentFileIndex = null"
          :download-url-fn="downloadFn"
          :files="filesForViewer"
          :current-index="currentFileIndex"
        />
      </template>
      <template #overlay v-if="isShowOverlay && !isClientMessage">
        <message-controls
          @remove="removeMessage"
          @edit="isEdit = true"
          :message="message"
        />
      </template>
    </base-message>
    <edit-message-form
      v-if="isEdit"
      @save="isEdit = false"
      @cancel="isEdit = false"
      :message="message"
    />
  </div>
</template>

<style lang="sass" scoped>
.sms-message
  background-color: #edf5ff
  max-width: 408px
  position: relative

  &:after
    content: ''
    width: 0
    height: 0
    position: absolute
    border-top: 15px solid #edf5ff
    border-right: 15px solid transparent
    top: 28px
    right: -15px
</style>

<script lang="ts">
import { Component, Emit, Inject, Prop, Watch } from 'vue-property-decorator'
import {
  Message,
  MessageType,
  SenderType,
} from '@/widgets/messages/types/Message'
import UiUserAvatar from '@/lib-components/UiUserAvatar.vue'
import { Manager } from '@/types/Manager'
import { ManagerModule } from '@/widgets/messages/modules/ManagerModule'
import ClientAvatar from '@/widgets/messages/components/message/ClientAvatar.vue'
import { AttachmentFile } from '@/types'
import FileHelper from '@/helpers/FileHelper'
import MessageMediaFiles from '@/widgets/messages/components/message/MessageMediaFiles.vue'
import MessageFiles from '@/widgets/messages/components/message/MessageFiles.vue'
import UiImageViewer from '@/lib-components/UiImageViewer.vue'
import MessageControls from '@/widgets/messages/components/message/MessageControls.vue'
import Client from '@/widgets/base/types/Client'
import BaseMessage from '@/widgets/base/components/message/BaseMessage.vue'
import EditMessageForm from '@/widgets/messages/components/message-form/EditMessageForm.vue'
import MessageModule from '@/widgets/messages/modules/MessageModule'

@Component({
  inheritAttrs: false,
  components: {
    EditMessageForm,
    MessageControls,
    UiImageViewer,
    MessageFiles,
    MessageMediaFiles,
    ClientAvatar,
    UiUserAvatar,
    BaseMessage,
  },
})
export default class ThreadMessage extends BaseMessage {
  @Prop({ type: Object, default: null })
  client!: Client | null

  @Prop({ type: Object, required: true })
  message!: Message

  @Inject('ManagerModule')
  managerModule!: ManagerModule

  @Inject('MessageModule')
  messageModule!: MessageModule

  currentFileIndex: number | null = null
  isShowOverlay = false
  isEdit = false

  setCurrentFile(index: number) {
    this.currentFileIndex = index
  }

  removeMessage() {
    this.messageModule.removeMessage({
      messageId: this.message.id,
      threadId: this.message.threadId,
    })
  }

  get isSms(): boolean {
    return this.message.type === MessageType.sms
  }

  get isClientMessage(): boolean {
    return this.message.senderType === SenderType.client
  }

  get messageTitle(): string | null {
    return this.isClientMessage ? this.client?.fullName ?? null : null
  }

  get manager(): Manager | undefined {
    return this.isClientMessage
      ? undefined
      : this.managerModule.getManagerByUid(this.message.senderId)
  }

  get attachedFiles(): AttachmentFile[] {
    return this.message.attachments.filter(
      file => !FileHelper.isMediaByMimeType(file.filetype)
    )
  }

  get attachedMediaFiles(): AttachmentFile[] {
    return this.message.attachments.filter(file =>
      FileHelper.isMediaByMimeType(file.filetype)
    )
  }

  get filesForViewer() {
    return this.attachedMediaFiles.map(file => ({
      name: file.filename,
      url: file.url,
      mime: file.filetype,
    }))
  }

  downloadFn(url: string) {
    return (
      process.env.MESSAGES_API_URL + '/download?url=' + encodeURIComponent(url)
    )
  }

  @Watch('isEdit')
  @Emit()
  setEdit() {
    return this.isEdit
  }
}
</script>
