class Transaccion {
  constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado, format, moneda_id}) {
    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.format_array = format
    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, format_array, format_call}) {
    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_call({value: this.valor.valor, format, format_array}))
    ).append(
      $('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? format_call({value: this.valor.valor, format, format_array}) : '')
    ).append(
      $('<td></td>').attr('class', 'right aligned').html(format_call({value: saldo, format_array, format}))
    ).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',
  mes: '#mes',
  buttons: {
    prev: '#prev_button',
    left: '#left_button',
    right: '#right_button',
    next: '#next_button'
  },
  cuenta_id: 0,
  cuenta: null,
  transacciones: [],
  cuentas: [],
  monedas: [],
  date: new Date(),
  saldo: 0,
  acumulation: 0,
  intl_format: null,
  max: null,
  format: ({format_array, format, value}) => {
    let output = []
    if (format_array.prefijo !== '') {
      output.push(format_array.prefijo)
    }
    output.push(format.format(Math.round(value * Math.pow(10, format_array.decimales)) / Math.pow(10, format_array.decimales)))
    if (format_array.sufijo !== '') {
      output.push(format_array.sufijo)
    }
    return output.join('')
  },
  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
          this.intl_format =  Intl.NumberFormat('es-CL')
          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)
            )
            promises = this.get().transaccionesMes(this.date)
            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.get().transaccionesAcumulacion(this.date).then((response) => {
                  this.acumulation = response.acumulation
                  this.saldo = response.acumulation
                }).then(() => {
                  this.draw().table()
                  this.draw().acumulation()
                })
              })
            } else {
              this.draw().table()
            }
          })
        })
      },
      transaccionesLimit: () => {
        let promises = []
        const amount = data.transacciones
        let step = 50
        let start = 0
        if (this.max !== null) {
          step = Math.min(50, this.max)
          start = Math.max(0, amount - this.max)
        }
        for (let i = start; i <= amount; i += step) {
          promises.push(
              sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i)
          )
        }
        return promises
      },
      transaccionesMes: (mes) => {
        let promises = []
        promises.push(
            sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/month/' + [mes.getFullYear(), mes.getMonth() + 1, '1'].join('-'))
        )
        return promises
      },
      transaccionesAcumulacion: (mes) => {
        return sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/acum/' + [mes.getFullYear(), mes.getMonth() + 1, '1'].join('-'))
      },
      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 + ')')
              )
              select.dropdown()
            })
          })
          this.get().monedas().then(() => {
            const select = this.modal.find("[name='moneda']")
            $.each(this.monedas, (i, el) => {
              const option = $('<option></option>').attr('value', el.id).html(el.denominacion)
              if (el.id === '1') {
                option.attr('selected', 'selected')
              }
              select.append(option)
            })
          })
        })
      },
      categoria: (idx) => {
        return sendGet(_urls.api + '/cuenta/' + this.cuentas[idx].id + '/categoria').then((data) => {
          this.cuentas[idx].categoria = data.categoria
        })
      },
      monedas: () => {
        return sendGet(_urls.api + '/monedas').then((response) => {
          this.monedas = response.monedas
        })
      }
    }
  },
  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 parent = $(this.id)
        parent.html('')
        $.each(this.transacciones, (i, el) => {
          this.saldo = this.saldo + parseInt(el.valor.valor)// * ((el.isIncrement()) ? 1 : -1)
          parent.append(el.draw({saldo: this.saldo, format: this.intl_format, format_array: this.cuenta.moneda.format, format_call: this.format}))
        })
      },
      acumulation: () => {
        const parent = $(this.id)
        parent.prepend(
            $('<tr></tr>').append(
                $('<td></td>').html('')
            ).append(
                $('<td></td>').html('')
            ).append(
                $('<td></td>').html('Acumulacion Anterior')
            ).append(
                $('<td></td>').attr('class', 'right aligned').html('')
            ).append(
                $('<td></td>').attr('class', 'right aligned').html('')
            ).append(
                $('<td></td>').attr('class', 'right aligned').html(this.format({
                  format_array: this.cuenta.moneda.format,
                  format: this.intl_format,
                  value: this.acumulation
                }))
            ).append(
                $('<td></td>').attr('class', 'right aligned').html('')
            )
        )
      }
    }
  },
  add: function() {
    return {
      show: () => {
        this.modal.find('form').trigger('reset')
        this.modal.modal('show')
      },
      exec: () => {
        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: fecha,
          glosa: $("[name='glosa']").val(),
          detalle: $("[name='detalle']").val(),
          valor: (valor < 0) ? -valor : valor,
          moneda_id: $("[name='moneda']").val()
        })
        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 cuenta = $("[name='cuenta']").val()
    const glosa = $("[name='glosa']").val()
    const detalle = $("[name='detalle']").val()
    const valor = $("[name='valor']").val()
    const moneda_id = $("[name='moneda']").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,
      moneda_id
    })
    return sendPut(_urls.api + '/transaccion/' + id + '/edit', data).then(() => {
      this.modal.modal('hide')
      this.get().transacciones()
    })
  },
  changeMonth: function(dif) {
    let d = this.date
    d.setMonth(this.date.getMonth() + dif)
    this.date = d
    this.checkButtons()
    $(this.mes).calendar('set date', this.date)
  },
  changeYear: function(dif) {
    let d = this.date
    d.setFullYear(this.date.getFullYear() + dif)
    this.date = d
    this.checkButtons()
    $(this.mes).calendar('set date', this.date)
  },
  checkButtons: function() {
    let f = new Date()
    if (this.date.getMonth() === f.getMonth() && this.date.getFullYear() === f.getFullYear()) {
      $(this.buttons.right).addClass('disabled')
    } else {
      $(this.buttons.right).removeClass('disabled')
    }
    if (this.date.getFullYear() === f.getFullYear()) {
      $(this.buttons.next).addClass('disabled')
    } else {
      $(this.buttons.next).removeClass('disabled')
    }
  },
  refresh: function () {
    this.get().transacciones()
    this.checkButtons()
  },
  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()
      },
      mes: () => {
        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Dicembre']
        $(this.mes).calendar({
          type: 'month',
          initialDate: this.date,
          maxDate: new Date(),
          text: {
            months: meses,
            monthsShort: meses.map((item) => {item.slice(0, 3)})
          },
          formatter: {
            date: function (date, settings) {
              if (!date) return '';
              return meses[date.getMonth()] + ', ' + date.getFullYear()
            }
          },
          onChange: (date) => {
            this.date = date
            this.refresh()
          }
        })
      },
      buttons: () => {
        $(this.buttons.right).click((e) => {
          this.changeMonth(1)
        })
        $(this.buttons.left).click((e) => {
          this.changeMonth(-1)
        })
        $(this.buttons.next).click(() => {
          this.changeYear(1)
        })
        $(this.buttons.prev).click(() => {
          this.changeYear(-1)
        })
      }
    }
  },
  setup: function() {
    this.build().modal()
    this.build().mes()
    this.build().buttons()
    $(this.id).parent().find('#refresh').click(() => {
      this.refresh()
    })
    $(this.id).parent().find('#add').click(() => {
      this.add().show()
    })
    this.get().transacciones()
  }
}