<template>
  <div class="thread" :class="{ thread_closed: thread.processedAt }">
    <thread-header
      @show-managers="isShowManagersForm = true"
      :thread="thread"
    />
    <div class="relative-position">
      <thread-messages
        @set-edit="isEdit = $event"
        :thread="thread"
        :dense="dense"
      />
      <div v-if="isShowReplyForm">
        <whisperers :thread-id="thread.id" />
        <reply-message-form
          @save="isShowReplyForm = false"
          @cancel="isShowReplyForm = false"
          :thread-id="thread.id"
        />
      </div>
      <thread-managers-select
        v-if="isShowManagersForm"
        @set-subscribed-managers="updateManagers"
        @subscribe-me="subscribeMe"
        @close="isShowManagersForm = false"
        :uids="thread.managerUids"
      />
    </div>
    <thread-footer
      v-if="!isShowReplyForm && !isEdit"
      @reply="isShowReplyForm = true"
      @open-thread="openThread"
      @close-thread="closeThread"
      :thread="thread"
      :is-loading-processed-at="isLoadingProcessedAt"
    />
  </div>
</template>

<style lang="sass" scoped>
.thread
  border-radius: 16px
  margin-bottom: 8px
  background-color: $blue-grey-2

  &_closed
    background-color: $blue-grey-1
</style>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import ThreadHeader from '@/widgets/messages/components/thread/ThreadHeader.vue'
import ThreadMessages from '@/widgets/messages/components/thread/ThreadMessages.vue'
import ThreadFooter from '@/widgets/messages/components/thread/ThreadFooter.vue'
import MessageModule from '@/widgets/messages/modules/MessageModule'
import ManagersSelect from '@/widgets/base/components/managers-select/ManagersSelect.vue'
import ThreadManagersSelect from '@/widgets/messages/components/thread/thread-managers/ThreadManagersSelect.vue'
import ReplyMessageForm from '@/widgets/messages/components/message-form/ReplyMessageForm.vue'
import Whisperers from '@/widgets/messages/components/message-form/Whisperers.vue'

@Component({
  components: {
    Whisperers,
    ReplyMessageForm,
    ThreadManagersSelect,
    ManagersSelect,
    ThreadFooter,
    ThreadMessages,
    ThreadHeader,
  },
})
export default class Thread extends Vue {
  @Prop({ type: Object, required: true })
  thread!: MessageThread

  @Inject('MessageModule')
  messageModule!: MessageModule

  @Prop({ type: Boolean, default: true })
  dense!: boolean

  isEdit = false
  isLoadingProcessedAt = false
  isShowManagersForm = false
  isShowReplyForm = false

  closeThread() {
    this.wrapWithLoading(() => this.messageModule.closeThread(this.thread.id))
  }

  openThread() {
    this.wrapWithLoading(() => this.messageModule.openThread(this.thread.id))
  }

  subscribeMe(managerUid: string) {
    this.isShowManagersForm = false
    this.updateManagers([...this.thread.managerUids, managerUid])
  }

  async wrapWithLoading(fn: Function) {
    this.isLoadingProcessedAt = true
    await fn()
    this.isLoadingProcessedAt = false
  }

  updateManagers(managerUids: string[]) {
    this.messageModule.updateThread({ ...this.thread, managerUids })
    this.messageModule.updateManagersInThread({
      threadId: this.thread.id,
      managerUids,
    })
  }
}
</script>
