class Cuenta {
  constructor({id, nombre, categoria_id, tipo_id, moneda_id, categoria, tipo, moneda, saldo, saldoFormateado}) {
    this.id = id
    this.nombre = nombre
    this.categoria_id = categoria_id
    this.tipo_id = tipo_id
    this.moneda_id = moneda_id
    this.categoria = categoria
    this.tipo = tipo
    this.moneda = moneda
    this.modal = null
  }
  setModal(modal) {
    this.modal = modal
  }
  draw() {
    return $('<tr></tr>').append(
      $('<td></td>').html(this.nombre)
    ).append(
      $('<td></td>').html(this.categoria.nombre + ' - ' + this.categoria.tipo.descripcion)
    ).append(
      $('<td></td>').css('color', '#' + this.tipo.color).html(this.tipo.descripcion)
    ).append(
        $('<td></td>').html(this.moneda.codigo)
    ).append(
      $('<td></td>').attr('class', 'right aligned').append(
        $('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).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').attr('data-id', this.id).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("[name='nombre']").val(this.nombre)
    form.find("[name='categoria']").dropdown('set selected', this.categoria.id)
    form.find("[name='tipo']").dropdown('set selected', this.tipo.id)
    form.find("[name='moneda']").dropdown('set selected', this.moneda.id)
    modalToEdit(this.modal)
    this.modal.modal('show')
  }
  remove() {
    sendDelete(_urls.api + '/cuenta/' + this.id + '/delete').then(() => {
      cuentas.get().cuentas()
    })
  }
}

const cuentas = {
  id: '#cuentas',
  cuentas: [],
  categorias: [],
  tipos: [],
  get: function() {
    return {
      cuentas: () => {
        this.cuentas = []
        return sendGet(_urls.api + '/cuentas').then((data) => {
          if (data.cuentas === null || data.cuentas.length === 0) {
            return
          }
          $.each(data.cuentas, (i, el) => {
            const cuenta = new Cuenta(el)
            cuenta.setModal(this.modal)
            this.cuentas.push(cuenta)
          })
        }).then(() => {
          this.draw().cuentas()
        })
      },
      categorias: () => {
        return sendGet(_urls.api + '/categorias').then((data) => {
          if (data.categorias === null || data.categorias.length === 0) {
            return
          }
          this.categorias = data.categorias
        }).then(() => {
          this.draw().categorias()
        })
      },
      tipos: () => {
        return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
          if (data.tipos === null || data.tipos.length === 0) {
            return
          }
          this.tipos = data.tipos
        }).then(() => {
          this.draw().tipos()
        })
      },
      monedas: () => {
        return sendGet(_urls.api + '/monedas').then((data) => {
          if (data.monedas === null || data.monedas.length === 0) {
            return
          }
          this.monedas = data.monedas
        }).then(() => {
          this.draw().monedas()
        })
      },
      parent: () => {
        const segment = $(this.id)
        let parent = segment.find('tbody')
        if (parent.length === 0) {
          parent = this.buildParent(segment)
        }
        return parent
      }
    }
  },
  buildParent: function(segment) {
    const table = $('<table></table>').attr('class', 'ui table').append(
      $('<thead></thead>').append(
        $('<tr></tr>').append(
          $('<th></th>').html('Cuenta')
        ).append(
          $('<th></th>').html('Categoría')
        ).append(
          $('<th></th>').html('Tipo')
        ).append(
            $('<th></th>').html('Moneda')
        ).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')
            )
          )
        )
      )
    )
    table.find('.ui.button').click((e) => {
      e.preventDefault()
      this.add()
      return false
    })
    parent = $('<tbody></tbody>')
    table.append(parent)
    segment.append(table)
    return parent
  },
  draw: function() {
    return {
      cuentas: () => {
        const parent = this.get().parent()
        parent.html('')
        $.each(this.cuentas, (i, el) => {
          parent.append(el.draw())
        })
      },
      categorias: () => {
        const select = $("[name='categoria']")
        $.each(this.categorias, (i, el) => {
          select.append(
              $('<option></option>').attr('value', el.id).html(el.nombre + ' - ' + el.tipo.descripcion)
          )
        })
      },
      tipos: () => {
        const select = $("[name='tipo']")
        $.each(this.tipos, (i, el) => {
          select.append($('<option></option>').attr('value', el.id).html(el.descripcion))
        })
      },
      monedas: () => {
        const select = $("[name='moneda']")
        $.each(this.monedas, (i, el) => {
          const opt = $('<option></option>').attr('value', el.id).html(el.denominacion)
          if (el.codigo === 'CLP') {
            opt.attr('selected', 'selected')
          }
          select.append(opt)
        })
      }
    }
  },
  add: function() {
    this.modal.find('form').trigger('reset')
    modalToAdd(this.modal)
    this.modal.modal('show')
  },
  doAdd: function() {
    const data = JSON.stringify({
      categoria_id: $("[name='categoria']").val(),
      nombre: $("[name='nombre']").val(),
      tipo_id: $("[name='tipo']").val(),
      moneda_id: $("[name='moneda']").val()
    })
    return sendPost(
      _urls.api + '/cuentas/add',
      data
    ).then((data) => {
      this.modal.modal('hide')
      this.get().cuentas()
    })
  },
  doEdit: function() {
    form = this.modal.find('form')
    const id = form.find("[name='id']").val()
    const data = JSON.stringify({
      nombre: form.find("[name='nombre']").val(),
      categoria_id: form.find("[name='categoria']").val(),
      tipo_id: form.find("[name='tipo']").val(),
      moneda_id: form.find("[name='moneda']").val()
    })
    sendPut(_urls.api + '/cuenta/' + id + '/edit', data).then(() => {
      this.modal.modal('hide')
      this.get().cuentas()
    })
  },
  setupModal: function() {
    this.modal = $('.ui.modal')
    this.modal.modal()
    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
      this.modal.modal('hide')
    })
    this.modal.find('form').submit((e) => {
      e.preventDefault()
      const add = $(e.currentTarget).find('.ui.button').find('.plus.icon')
      if (add.length > 0) {
        this.doAdd()
      } else {
        this.doEdit()
      }
      return false
    })
  },
  setup: function() {
    this.setupModal()
    this.get().cuentas().then(() => {
      this.get().categorias().then(() => {
        this.get().tipos().then(() => {
          this.get().monedas()
        })
      })
    })
  }
}