const ubigeo = {
  consultarDepartamento() {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../UbigeoServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'listarDepartamento'
        }, beforeSend: function (xhr) {

        }, success: function (data, textStatus, jqXHR) {
          resolve(data)
        }, error: function (jqXHR, textStatus, errorThrown) {
          reject("Error al listar departamentos")
        }
      })
    })
  },
  consultarProvincia(codigoDepartamento) {
    let json = {
      codigoDepartamento: codigoDepartamento
    }
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../UbigeoServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'listarProvincia',
          json: JSON.stringify(json)
        }, beforeSend: function (xhr) {

        }, success: function (data, textStatus, jqXHR) {
          resolve(data)
        }, error: function (jqXHR, textStatus, errorThrown) {
          reject("Error al listar provincias")
        }
      })
    })
  },
  consultarDistrito(codigoDepartamento, codigoProvincia) {
    let json = {
      codigoProvincia: codigoProvincia,
      codigoDepartamento: codigoDepartamento
    }

    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../UbigeoServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'listarDistrito',
          json: JSON.stringify(json)
        }, beforeSend: function (xhr) {

        }, success: function (data, textStatus, jqXHR) {
          resolve(data)
        }, error: function (jqXHR, textStatus, errorThrown) {
          reject("Error al listar distritos")
        }
      })
    })
  }
}
const asignarEventos = () => {
  let slDepartamento = document.querySelector('#select_departamento')
  let slProvincia = document.querySelector('#select_provincia')
  let slDistrito = document.querySelector('#select_distrito')
  slDepartamento.addEventListener('change', (e) => {
    let codigoDepartamento = parseInt(e.target.value)
    ubigeo.consultarProvincia(codigoDepartamento)
      .then((data) => {
        let opt = '<option value="0">[ SELECCIONE ]</option>'
        opt += createSelectOptions(data.data.provincias, 'codigoProvincia', 'nombreProvincia')
        slProvincia.innerHTML = opt
      })
      .then(() => {
        slDistrito.innerHTML = '<option value="0">[ SELECCIONE ]</option>'
        $('#select_distrito').selectpicker('refresh')
        $('#select_provincia').selectpicker('refresh')
      })
  })
  slProvincia.addEventListener('change', (e) => {
    let codigoDepartamento = parseInt(slDepartamento.value)
    let codigoProvincia = parseInt(e.target.value)
    ubigeo.consultarDistrito(codigoDepartamento, codigoProvincia)
      .then((data) => {
        let opt = '<option value="0">[ SELECCIONE ]</option>'
        opt += createSelectOptions(data.data.distritos, 'codigoDistrito', 'nombreDistrito')
        slDistrito.innerHTML = opt
      })
      .then(() => {
        $('#select_distrito').selectpicker('refresh')
      })
  })
  slDepartamento.addEventListener('change', (e) => {
    let departamento = parseInt(e.target.value)
    if (departamento === 0) {
      slProvincia.innerHTML = '<option value="0">[ SELECCIONE ]</option>'
      slDistrito.innerHTML = '<option value="0">[ SELECCIONE ]</option>'
    } else {
      slProvincia.value = 0
      slDistrito.value = 0
    }
    $('#select_provincia').selectpicker('refresh')
    $('#select_distrito').selectpicker('refresh')
  })
}

ubigeo
  .consultarDepartamento()
  .then((data) => {
    let element = document.querySelector('#select_departamento')
    let opt = '<option value="0">[ SELECCIONE ]</option>'
    opt += createSelectOptions(data.data.departamentos, 'codigoDepartamento', 'nombreDepartamento')
    element.innerHTML = opt
  })
  .then(() => {
    $('#select_departamento').selectpicker('refresh')
  })
asignarEventos()