const transacciones = {
  id: '#transacciones',
  cuenta_id: 0,
  cuenta: null,
  transacciones: [],
  cuentas: [],
  saldo: 0,
  get: function() {
    return {
      transacciones: () => {
        return $.ajax({
          url: _urls.api + '/cuenta/' + this.cuenta_id + '/transacciones',
          method: 'GET',
          dataType: 'json'
        }).then((data) => {
          if (data.cuenta === null) {
            return
          }
          this.cuenta = data.cuenta
          this.saldo = this.cuenta.saldo
          $('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')')
          if (data.transacciones === null || data.transacciones.length == 0) {
            return
          }
          this.transacciones = data.transacciones
        }).then(() => {
          this.draw()
        })
      },
      cuentas: () => {
        return $.ajax({
          url: _urls.api + '/cuentas',
          method: 'GET',
          dataType: 'json'
        }).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) => {
            select.append(
              $('<option></option>').attr('value', el.id).html(el.nombre + ' (' + el.categoria.nombre + ')')
            )
          })
        })
      }
    }
  },
  draw: function() {
    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
    const parent = $(this.id)
    parent.html('')
    $.each(this.transacciones, (i, el) => {
      const fuente = (el.valor < 0) ? el.desde : el.hasta
      parent.append(
        $('<tr></tr>').append(
          $('<td></td>').html(el.fechaFormateada)
        ).append(
          $('<td></td>').append(
            $('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
          )
        ).append(
          $('<td></td>').html(el.glosa + '<br />' + el.detalle)
        ).append(
          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? el.valorFormateado.replace('-', '') : '')
        ).append(
          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? '' : el.valorFormateado)
        ).append(
          $('<td></td>').attr('class', 'right aligned').html(format.format(this.saldo))
        )
      )
      this.saldo -= parseInt(el.valor)
    })
  },
  add: function() {
    return {
      show: () => {
        this.modal.find('form').trigger('reset')
        this.modal.modal('show')
      },
      exec: () => {
        const valor = $("[name='valor']").val()
        const cuenta = $("[name='cuenta']").val()
        const data = JSON.stringify({
          desde_id: (valor < 0) ? this.cuenta_id : cuenta,
          hasta_id: (valor < 0) ? cuenta : this.cuenta_id,
          fecha: $("[name='fecha']").val(),
          glosa: $("[name='glosa']").val(),
          detalle: $("[name='detalle']").val(),
          valor: (valor < 0) ? -valor : valor
        })
        return $.ajax({
          url: _urls.api + '/transacciones/add',
          method: 'POST',
          data: data,
          dataType: 'json'
        }).then(() => {
          this.modal.modal('hide')
          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()
          this.add().exec()
          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('.ui.button').click(() => {
      this.add().show()
    })
    this.get().transacciones()
  }
}