const cuentas = {
  id: '#cuentas',
  categorias: [],
  get: function() {
    return {
      parent: () => {
        let parent = $(this.id)
        if (parent.length === 0) {
          const table = $('<table></table>').attr('class', 'ui striped table').append(
            $('<thead></thead>').append(
              $('<tr></tr>').append(
                $('<th></th>').html('Cuenta')
              ).append(
                $('<th></th>').attr('class', 'right aligned').html('Saldo')
              )
            )
          )
          parent = $('<tbody></tbody>').attr('id', this.id)
          table.append(parent)
          $('h1.header').after(table)
        }
        return parent
      },
      categorias: () => {
        return $.ajax({
          url: _urls.api + '/categorias',
          method: 'GET',
          dataType: 'json'
        }).then((data) => {
          if (data.categorias === null || data.categorias.length == 0) {
            return
          }
          this.categorias = data.categorias
        }).then(() => {
          this.draw().categorias()
        })
      },
      cuentas: (categoria_id) => {
        return $.ajax({
          url: _urls.api + '/categoria/' + categoria_id + '/cuentas',
          method: 'GET',
          dataType: 'json'
        }).then((data) => {
          if (data.cuentas === null || data.cuentas.length == 0) {
            return
          }
          const idx = this.categorias.findIndex(el => {
            if (el.id == categoria_id) {
              return true
            }
          })
          this.categorias[idx].cuentas = data.cuentas
        }).then(() => {
          this.draw().cuentas(categoria_id)
        })
      }
    }
  },
  remove: function() {
    return {
      cuentas: (categoria_id) => {
        const idx = this.categorias.findIndex(el => {
          if (el.id == categoria_id) {
            return true
          }
        })
        const parent = $("[data-id='" + categoria_id + "']")
        for (let i = 0; i < this.categorias[idx].cuentas.length; i ++) {
          parent.next().remove()
        }
      }
    }
  },
  draw: function() {
    return {
      categorias: () => {
        const parent = this.get().parent()
        $.each(this.categorias, (i, el) => {
          const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
            $('<i></i>').attr('class', 'plus icon')
          ).click((e) => {
            const plus = button.find('.plus')
            if (plus.length == 0) {
              console.debug(e.target)
              this.remove().cuentas(el.id)
              button.find('i.icon').removeClass('minus').addClass('plus')
            } else {
              console.debug(e.target)
              this.get().cuentas(el.id)
              button.find('i.icon').removeClass('plus').addClass('minus')
            }
          })
          const f = $('<tr></tr>').attr('data-id', el.id).append(
            $('<td></td>').append(
              $('<div></div>').append(button).append(el.nombre)
            )
          ).append(
            $('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
          )
          parent.append(f)
        })
      },
      cuentas: (categoria_id) => {
        const idx = this.categorias.findIndex(el => {
          if (el.id == categoria_id) {
            return true
          }
        })
        const parent = $("[data-id='" + categoria_id + "']")
        $.each(this.categorias[idx].cuentas, (i, el) => {
          parent.after(
            $('<tr></tr>').attr('class', 'item').append(
              $('<td></td>').append(
                $('<a></a>').attr('href', _urls.base + 'cuenta/' + el.id).html(el.nombre)
              )
            ).append(
              $('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
            )
          )
        })
      }
    }
  },
  setup: async function() {
    this.get().categorias()
  }
}