import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import VueClipboard from 'vue-clipboard2'
import { Registers } from '@/classes/DTO/Registers'
import httpClient from '@/api/Main/HttpClient'
import { MockConfiguration } from '@/api/Main/Schemas/AddMockSchema'

Vue.use(VueClipboard)

export enum Mode {
  ADD = 'add',
  UPDATE = 'update',
}

@Component
export default class Mocks extends Vue {
  @Prop()
  personalCode!: string

  @Prop()
  mode!: Mode

  showLoader = false
  isHidden = false
  registers = new Registers()
  register2Id: Record<string, string> = {}

  mounted () {
    console.log('mounted', this.personalCode)
  }

  @Watch('personalCode', { immediate: true })
  onPersonalCodeChanged () {
    this.registers.reset()
    this.showLoader = false
    this.isHidden = false
    this.refreshMocks()
  }

  refreshMocks () {
    if (this.mode !== Mode.UPDATE) {
      return
    }
    this.showLoader = true
    httpClient.mockConfigurations({ personalCode: this.personalCode })
      .then((data: any) => {
        const existServiceKeys = []
        for (const mockConfiguration of data.data) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
          // @ts-ignore
          this.registers[mockConfiguration.code] = mockConfiguration.value
          this.register2Id[mockConfiguration.code] = mockConfiguration.id
          existServiceKeys.push(mockConfiguration.code)
        }
        for (const serviceCode in this.registers) {
          if (existServiceKeys.indexOf(serviceCode) > -1) {
            continue
          }
          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
          // @ts-ignore
          this.registers[serviceCode] = ''
          delete this.register2Id[serviceCode]
        }
      })
      .then(() => {
        this.showLoader = false
      })
  }

  async onServiceChanged (serviceKey: string) {
    if (this.mode !== Mode.UPDATE) {
      return
    }
    if (typeof this.register2Id[serviceKey] === 'undefined') {
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      await this.saveMock(this.personalCode, serviceKey, Number(this.registers[serviceKey]))
      await this.refreshMocks()
      return
    }

    this.showLoader = true
    httpClient.changeMockValueConfiguration({
      id: this.register2Id[serviceKey],
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      value: this.registers[serviceKey]
    })
      .then((data: any) => {
        console.log('updateMock')
        console.log(data)
      })
      .then(() => {
        this.showLoader = false
      })
  }

  saveMocks () {
    const mockConfigurations: MockConfiguration[] = []
    for (const serviceCode in this.registers) {
      const mockConfiguration = new MockConfiguration()
      mockConfiguration.personalCode = this.personalCode
      mockConfiguration.code = serviceCode
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      mockConfiguration.value = this.registers[serviceCode]
      if (!mockConfiguration.value) {
        continue
      }
      mockConfiguration.active = 'true'
      mockConfigurations.push(mockConfiguration)
    }
    this.showLoader = true
    httpClient.addMockConfigurations({ items: mockConfigurations })
      .then((data: any) => {
        console.log('saveMocks')
        console.log(data)
      })
      .then(() => {
        this.showLoader = false
        this.isHidden = true
      })
  }

  saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> {
    const mockConfigurations: MockConfiguration[] = []
    const mockConfiguration = new MockConfiguration()
    mockConfiguration.personalCode = personalCode
    mockConfiguration.code = serviceCode
    mockConfiguration.value = value
    mockConfiguration.active = 'true'
    mockConfigurations.push(mockConfiguration)
    this.showLoader = true
    return httpClient.addMockConfigurations({ items: mockConfigurations })
      .then((data: any) => {
        console.log('saveMocks')
        console.log(data)
      })
      .then(() => {
        this.showLoader = false
      })
  }
}