<template>
  <div class="q-ma-sm new-message-form">
    <div class="flex no-wrap justify-between items-center q-pa-md">
      <div class="text-h4">Новое сообщение</div>
    </div>
    <base-message-form
      @save="saveMessage"
      @change-type="currentType = $event"
      @cancel="cancel"
      :types="types"
      :current-type="currentType"
      :loading="isLoading"
    >
      <template #body>
        <client-form
          @set-client-id="clientId = $event"
          @set-order-name="orderName = $event"
          @set-errors="setErrors"
          :order-name="orderName"
          :client-id="clientId"
          :search-clients-fn="searchClientFn"
          :get-client-by-order="getClientByOrderName"
          :get-orders-by-client="getOrdersByClientId"
          :get-client-by-id-fn="getClientById"
          :disable="!!$route.query.orderName"
          :errors="errors"
        />
        <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" class="q-mt-md" />
        </template>
      </template>
    </base-message-form>
  </div>
</template>

<style scoped lang="sass">
.new-message-form
  background-color: $blue-grey-2
  border-radius: 16px
  padding: 8px
</style>

<script lang="ts">
import { Component, Emit } from 'vue-property-decorator'
import { MessageType } from '@/widgets/messages/types/Message'
import { NotifyHelper } from '@/helpers'
import { ResponseErrors } from '@/types'
import NewMessageFiles from '@/widgets/messages/components/message-form/NewMessageFiles.vue'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import FileAttachBtn from '@/widgets/base/components/message-form/FileAttachBtn.vue'
import BaseMessageForm from '@/widgets/base/components/message/BaseMessageForm.vue'
import ClientForm from '@/widgets/base/components/client-form/ClientForm.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,
    ClientForm,
    FileAttachBtn,
    UiInputMaterial,
    BaseMessageForm,
    NewMessageFiles,
  },
})
export default class NewMessageForm extends CommonMessageForm {
  isShowManagersForm = false
  managerUids: string[] = []
  clientId: number | null = null
  orderName: string = ''
  text = ''
  currentType = MessageType.feedback

  created() {
    this.orderName = (this.$route.query.orderName as string) ?? ''
  }

  setErrors(errors: ResponseErrors) {
    if (errors.orderName) {
      this.errors.orderName = errors.orderName
    }
  }

  clear() {
    this.isShowManagersForm = false
    this.managerUids = []
    this.clientId = null
    this.orderName = ''
    this.text = ''
    this.currentType = MessageType.feedback
  }

  saveMessage() {
    this.isLoading = true

    this.messageModule
      .createThread({
        text: this.text,
        type: this.currentType,
        managerUids: this.managerUids,
        orderName: this.orderName,
        clientId: this.clientId,
        files:
          this.currentType === MessageType.feedback ? this.files : undefined,
      })
      .then(() => {
        NotifyHelper.success('Сохранено')
        this.clear()
        this.save()
      })
      .catch(error => {
        if (error.response.data.errors) {
          this.errors = error.response.data.errors
        } else {
          NotifyHelper.serverError()
        }
      })
      .finally(() => (this.isLoading = false))
  }

  @Emit()
  cancel() {
    this.clear()

    return true
  }
}
</script>
