<template>
  <div class="q-px-sm q-pb-sm">
    <base-message-form
      @save="sendMessage"
      @change-type="currentType = $event"
      @cancel="cancel"
      :types="types"
      :loading="isLoading"
      :current-type="currentType"
    >
      <template #body>
        <sms-input
          v-if="currentType === messageTypes.sms"
          v-model="text"
          :errors="errors"
        />
        <template v-else>
          <feedback-input v-model="text" :errors="errors" />
          <file-attach-btn @change="selectFiles" class="q-mt-md" />
          <new-message-files :files="files" />
        </template>
      </template>
    </base-message-form>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import { NotifyHelper } from '@/helpers'
import { MessageType } from '@/widgets/messages/types/Message'
import NewMessageFiles from '@/widgets/messages/components/message-form/NewMessageFiles.vue'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import BaseMessageForm from '@/widgets/base/components/message/BaseMessageForm.vue'
import FileAttachBtn from '@/widgets/base/components/message-form/FileAttachBtn.vue'
import CommonMessageForm from '@/widgets/messages/components/message-form/CommonMessageForm'
import SmsInput from '@/widgets/messages/components/message-form/common/SmsInput.vue'
import FeedbackInput from '@/widgets/messages/components/message-form/common/FeedbackInput.vue'

@Component({
  components: {
    FeedbackInput,
    SmsInput,
    FileAttachBtn,
    UiInputMaterial,
    BaseMessageForm,
    NewMessageFiles,
  },
})
export default class ReplyMessageForm extends CommonMessageForm {
  @Prop({ type: Number, required: true })
  threadId!: number

  text = ''
  currentType: MessageType = MessageType.feedback

  sendMessage() {
    this.isLoading = true

    const payload = {
      text: this.text,
      files: this.files,
      type: this.currentType,
      threadId: this.threadId,
    }

    this.messageModule
      .sendReplyMessage(payload)
      .then(() => this.save())
      .catch(error => {
        if (error.response.data.errors) {
          this.errors = error.response.data.errors
        } else {
          NotifyHelper.serverError()
        }
      })
      .finally(() => (this.isLoading = false))
  }
}
</script>
