<template>
  <div
    class="flex no-wrap ui-gap-x-sm"
    :class="{ 'client-form_disable': disable }"
  >
    <order-select
      v-if="!!clientId"
      @input="setOrderName"
      :value="orderName"
      :orders="orders"
      :disable="!orders.length || disable"
      :errors="errors"
    />
    <order-input
      v-else
      @input="searchClientByOrder"
      :value="orderName"
      :debounce="250"
      :errors="errors"
      name="orderName"
    />
    <client-select
      @input="loadOrdersForClient"
      :value="clientId"
      :get-client-by-id-fn="getClientByIdFn"
      :search-fn="searchClientsFn"
      :errors="errors"
      :disable="disable"
    />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Order } from '@/widgets/base/types/Order'
import { ResponseErrors } from '@/types'
import { NotifyHelper } from '@/helpers'
import Client from '@/widgets/base/types/Client'
import SearchedClient from '@/widgets/base/types/SearchedClient'
import ClientSelect from '@/widgets/base/components/client-form/ClientSelect.vue'
import OrderSelect from '@/widgets/base/components/client-form/OrderSelect.vue'
import OrderInput from '@/widgets/base/components/client-form/OrderInput.vue'

@Component({
  components: { ClientSelect, OrderInput, OrderSelect },
  inheritAttrs: false,
})
export default class ClientForm extends Vue {
  @Prop(String)
  orderName!: string

  @Prop(Number)
  clientId!: number | null

  @Prop({ type: Object, default: () => ({}) })
  errors!: ResponseErrors

  @Prop({ type: Function, required: true })
  searchClientsFn!: (query: string) => Promise<SearchedClient[]>

  @Prop({ type: Function, required: true })
  getOrdersByClient!: (clientId: number) => Promise<Order[]>

  @Prop({ type: Function, required: true })
  getClientByOrder!: (orderName: string) => Promise<Client | null>

  @Prop(Function)
  getClientByIdFn!: (clientId: number) => Promise<Client>

  @Prop(Boolean)
  disable!: boolean

  orderModel: Order | null = null
  orders: Order[] = []

  async loadOrdersForClient(clientId: number) {
    this.setClientId(clientId)
    this.orderModel = null
    this.orders = []
    this.orders = await this.getOrdersByClient(clientId)
  }

  async searchClientByOrder(orderName: string) {
    this.setOrderName(orderName)

    try {
      const client = await this.getClientByOrder(orderName)

      if (!client) {
        this.errors.orderName = 'Такой заказ не сущетвует'
      } else {
        this.setClientId(client.id)

        await this.loadOrdersForClient(client.id)
      }
    } catch (e) {
      NotifyHelper.serverError()
    }
  }

  async created() {
    if (this.orderName) {
      if (this.clientId) {
        this.orders = await this.getOrdersByClient(this.clientId)
      } else {
        const client = await this.getClientByOrder(this.orderName)

        if (client) {
          this.setClientId(client.id)
        } else {
          this.setErrors({ orderName: 'Такого заказа нет' })
        }
      }
    }
  }

  @Emit()
  setErrors(errors: ResponseErrors) {
    return errors
  }

  @Emit()
  setOrderName(orderName: string) {
    return orderName
  }

  @Emit()
  setClientId(clientId: number) {
    return clientId
  }
}
</script>
