class Transaccion {
  constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado}) {
    this.id = id
    this.debito_id = debito_id
    this.credito_id = credito_id
    this.fecha = {
      fecha,
      formateada: fechaFormateada
    }
    this.glosa = glosa
    this.detalle = detalle
    this.valor = {
      valor,
      formateado: valorFormateado
    }
    this.debito = debito
    this.credito = credito
    this.modal = null
  }
  setCuenta(cuenta) {
    this.cuenta = cuenta
  }
  setModal(modal) {
    this.modal = modal
  }
  isDebito() {
    return this.debito.id === this.cuenta.id;
  }
  isIncrement() {
    const debits = ['Activo', 'Perdida']
    if (debits.indexOf(this.cuenta.tipo.descripcion)) {
      return this.isDebito()
    }
    return !this.isDebito()
  }
  draw({saldo, format}) {
    const fuente = (this.isDebito()) ? this.credito : this.debito
    return $('<tr></tr>').append(
      $('<td></td>').html(this.fecha.formateada)
    ).append(
      $('<td></td>').append(
        $('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
      )
    ).append(
      $('<td></td>').html(this.glosa + '<br />' + this.detalle)
    ).append(
      $('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? '' : format.format(this.valor.valor))
    ).append(
      $('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? format.format(this.valor.valor) : '')
    ).append(
      $('<td></td>').attr('class', 'right aligned').html(format.format(saldo))
    ).append(
      $('<td></td>').attr('class', 'right aligned').append(
        $('<button></button>').attr('class', 'ui tiny circular icon button').append(
          $('<i></i>').attr('class', 'edit icon')
        ).click((e) => {
          e.preventDefault()
          this.edit()
          return false
        })
      ).append(
        $('<button></button>').attr('class', 'ui tiny circular red icon button').append(
          $('<i></i>').attr('class', 'remove icon')
        ).click((e) => {
          e.preventDefault()
          this.remove()
          return false
        })
      )
    )
  }
  edit() {
    const form = this.modal.find('form')
    form.trigger('reset')
    form.find("[name='id']").val(this.id)
    form.find(".ui.calendar").calendar('set date', new Date(this.fecha.fecha))
    form.find("[name='cuenta']").dropdown('set selected', (this.isDebito()) ? this.credito_id : this.credito_id)
    form.find("[name='glosa']").val(this.glosa)
    form.find("[name='detalle']").val(this.detalle)
    form.find("[name='valor']").val(((this.isDebito()) ? -1 : 1) * this.valor.valor)
    modalToEdit(this.modal)
    this.modal.modal('show')
  }
  remove() {
    sendDelete(_urls.api + '/transaccion/' + this.id + '/delete').then(() => {
      transacciones.get().transacciones()
    })
  }
}

const transacciones = {
  id: '#transacciones',
  cuenta_id: 0,
  cuenta: null,
  transacciones: [],
  cuentas: [],
  saldo: 0,
  get: function() {
    return {
      transacciones: () => {
        this.draw().loading()
        let promises = []
        sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/amount').then((data) => {
          if (data.cuenta === null) {
            return
          }
          this.cuenta = data.cuenta
          sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/categoria').then((resp) => {
            this.cuenta.categoria = resp.categoria
          }).then(() => {
            this.saldo = this.cuenta.saldo
            $('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')').append(
                $('<i></i>').attr('class', 'square full icon').css('color', '#' + this.cuenta.tipo.color)
            )
            const amount = data.transacciones
            const step = 50
            for (let i = 0; i < amount; i += step) {
              promises.push(
                sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i)
              )
            }
            if (promises.length > 0) {
              Promise.all(promises).then((data_arr) => {
                this.transacciones = []
                data_arr.forEach(data => {
                  if (data.transacciones === null || data.transacciones.length === 0) {
                    return
                  }
                  $.each(data.transacciones, (i, el) => {
                    const tr = new Transaccion(el)
                    tr.setCuenta(this.cuenta)
                    tr.setModal(this.modal)
                    this.transacciones.push(tr)
                  })
                })
                this.transacciones.sort((a, b) => {
                  return (new Date(b.fecha)) - (new Date(a.fecha))
                })
              }).then(() => {
                this.draw().table()
              })
            } else {
              this.draw().table()
            }
          })
        })
      },
      cuentas: () => {
        return sendGet(_urls.api + '/cuentas').then((data) => {
          if (data.cuentas === null || data.cuentas.length === 0) {
            return
          }
          this.cuentas = data.cuentas
        }).then(() => {
          const select = this.modal.find("[name='cuenta']")
          $.each(this.cuentas, (i, el) => {
            this.get().categoria(i).then(() => {
              select.append(
                $('<option></option>').attr('value', el.id).html(el.nombre + ' (' + el.categoria.nombre + ')')
              )
            })
          })
        })
      },
      categoria: (idx) => {
        return sendGet(_urls.api + '/cuenta/' + this.cuentas[idx].id + '/categoria').then((data) => {
          this.cuentas[idx].categoria = data.categoria
        })
      }
    }
  },
  draw: function() {
    return {
      loading: () => {
        const parent = $(this.id)
        parent.html('')
        parent.append(
            $('<tr></tr>').append(
                $('<td></td>').attr('colspan', 7).append(
                    $('<div></div>').attr('class', 'ui active dimmer').append(
                        $('<div></div>').attr('class', 'ui indeterminate elastic text loader').html('Buscando los datos')
                    )
                )
            )
        )
      },
      table: () => {
        const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: this.cuenta.moneda.codigo})
        const parent = $(this.id)
        parent.html('')
        $.each(this.transacciones, (i, el) => {
          parent.append(el.draw({saldo: this.saldo, format: format}))
          this.saldo = this.saldo + parseInt(el.valor.valor) * ((el.isIncrement()) ? 1 : -1)
        })
      }
    }
  },
  add: function() {
    return {
      show: () => {
        this.modal.find('form').trigger('reset')
        this.modal.modal('show')
      },
      exec: () => {
        const fecha = $("[name='fecha']").val()
        const data1 = JSON.stringify({
          desde_id: $("[name='moneda']").val(),
          hasta_id: 1,
          fecha: fecha,
          valor: $("[name='cambio']").val()
        })
        sendPost(_urls.api + '/tipos/cambios/add', data1)

        const valor = $("[name='valor']").val()
        const cuenta = $("[name='cuenta']").val()
        const data = JSON.stringify({
          debito_id: (valor < 0) ? this.cuenta_id : cuenta,
          credito_id: (valor < 0) ? cuenta : this.cuenta_id,
          fecha: fecha,
          glosa: $("[name='glosa']").val(),
          detalle: $("[name='detalle']").val(),
          valor: (valor < 0) ? -valor : valor
        })
        return sendPost(_urls.api + '/transacciones/add', data).then(() => {
          this.modal.modal('hide')
          this.get().transacciones()
        })
      }
    }
  },
  edit: function() {
    const id = $("[name='id']").val()
    const fecha = $("[name='fecha']").val()
    const valor = $("[name='valor']").val()
    const cuenta = $("[name='cuenta']").val()
    const data = JSON.stringify({
      debito_id: (valor < 0) ? this.cuenta_id : cuenta,
      credito_id: (valor < 0) ? cuenta : this.cuenta_id,
      fecha,
      glosa,
      detalle,
      valor: (valor < 0) ? -valor : valor
    })
    return sendPut(_urls.api + '/transaccion/' + id + '/edit', data).then(() => {
      this.modal.modal('hide')
      this.get().transacciones()
    })
  },
  refresh: function () {
    this.get().transacciones()
  },
  build: function() {
    return {
      modal: () => {
        this.modal = $('.ui.modal')
        this.modal.modal()
        this.modal.find('.close.icon').click(() => {
          this.modal.modal('hide')
        })
        this.modal.find('form').submit((e) => {
          e.preventDefault()
          const add = $(e.currentTarget).find('.plus.icon')
          if (add.length > 0) {
            this.add().exec()
          } else {
            this.edit()
          }
          return false
        })
        this.modal.find('.ui.calendar').calendar({
          type: 'date',
          formatter: {
            date: function(date, settings) {
              if (!date) return ''
              let day = ('00' + date.getDate()).slice(-2)
              let month = ('00' + (date.getMonth() + 1)).slice(-2)
              let year = date.getFullYear()
              return year + '/' + month + '/' + day
            }
          },
          maxDate: new Date()
        })
        this.get().cuentas()
      }
    }
  },
  setup: function() {
    this.build().modal()
    $(this.id).parent().find('#refresh').click(() => {
      this.refresh()
    })
    $(this.id).parent().find('#add').click(() => {
      this.add().show()
    })
    this.get().transacciones()
  }
}