const fuentes = {
  id: '#fuentes',
  fuentes: [],
  tipos: [],
  bancos: [],
  modal: null,
  getParent: function() {
    let parent = $(this.id)
    if (parent.length === 0) {
      const table = $('<table></table>').attr('class', 'ui table').append(
        $('<thead></thead>').append(
          $('<tr></tr>').append(
            $('<th></th>').html('Fuente')
          ).append(
            $('<th></th>').html('Saldo')
          ).append(
            $('<th></th>').attr('class', 'right aligned').append(
              $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
                $('<i></i>').attr('class', 'plus icon')
              ).click(() => {
                this.add()
              })
            )
          )
        )
      )
      parent = $('<tbody></tbody>').attr('id', this.id)
      table.append(parent)
      $('h1.header').after(table)
    }
    return parent
  },
  setup: async function() {
    this.modal = $('.ui.modal')
    this.modal.modal()
    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
      this.modal.modal('hide')
    })
    this.getFuentes().then(() => {
      this.getTipos().then(() => {
        this.getBancos()
      })
    })
  },
  add: function() {
    this.modal.find('form').trigger('reset')
    this.modal.find('form').submit((e) => {
      e.preventDefault()
      this.doAdd()
      return false
    })
    this.modal.modal('show')
  },
  doAdd: function() {
    const data = JSON.stringify({
      tipo_id: $("select[name='tipo']").val(),
      banco_id: $("select[name='banco']").val()
    })
    $.ajax({
      url: _urls.api + '/fuentes/add',
      method: 'POST',
      data: data,
      dataType: 'json'
    }).then((data) => {
      this.modal.modal('hide')
      this.getFuentes()
    })
  },
  getFuentes: function() {
    return $.ajax({
      url: _urls.api + '/fuentes',
      method: 'GET',
      dataType: 'json'
    }).then((data) => {
      if (data.fuentes === null || data.fuentes.length == 0) {
        return
      }
      this.fuentes = data.fuentes
    }).then(() => {
      this.draw()
    })
  },
  getTipos: function() {
    return $.ajax({
      url: _urls.api + '/tipos_fuentes',
      method: 'GET',
      dataType: 'json'
    }).then((data) => {
      if (data.tipos_fuentes === null || data.tipos_fuentes.length == 0) {
        return
      }
      this.tipos = data.tipos_fuentes
    }).then(() => {
      const select = $("select[name='tipo']")
      select.html('')
      $.each(this.tipos, (i, el) => {
        select.append(
          $('<option></option>').attr('value', el.id).html(el.descripcion)
        )
      })
      select.dropdown()
    })
  },
  getBancos: function() {
    return $.ajax({
      url: _urls.api + '/bancos',
      method: 'GET',
      dataType: 'json'
    }).then((data) => {
      if (data.bancos === null || data.bancos.length == 0) {
        return
      }
      this.bancos = data.bancos
    }).then(() => {
      const select = $("select[name='banco']")
      $.each(this.bancos, (i, el) => {
        select.append(
          $('<option></option>').attr('value', el.id).html(el.nombre)
        )
      })
    })
  },
  draw: function() {
    const parent = this.getParent()
    $.each(this.fuentes, (i, el) => {
      const f = $('<tr></tr>').append(
        $('<td></td>').append(
          $('<a></a>').attr('href', _urls.base + 'fuente/' + el.id).html(el.tipo.descripcion + ' - ' + el.banco.nombre)
        )
      ).append(
        $('<td></td>').html(el.saldoFormateado)
      )
      parent.append(f)
    })
  }
}