const ajaxRequest = obj => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: obj.url,
      type: obj.type,
      dataType: obj.dataType,
      headers: {
        "Authorization": Cookies.get('Authorization')},
      data: obj.body,
      beforeSend: (xhr, settings) => {
      }, success: (response, textStatus, jqXHR) => {
        resolve(response)
      }, error: (jqXHR, textStatus, errorThrown) => {
        reject({
          message: `Error making the request`,
          status: jqXHR.status,
          request: obj
        })
      }
    })
  })
}
const ubigeo = {
  consultarDepartamento() {
    return ajaxRequest({
      url: '../UbigeoServlet',
      dataType: 'json',
      type: 'POST',
      body: {
        accion: 'listarDepartamento'
      }
    })
  },
  consultarProvincia(codigoDepartamento) {
    let json = {
      codigoDepartamento: codigoDepartamento
    }
    return ajaxRequest({
      url: '../UbigeoServlet',
      dataType: 'json',
      type: 'POST',
      body: {
        accion: 'listarProvincia',
        json: JSON.stringify(json)
      }
    })
  },
  consultarDistrito(codigoDepartamento, codigoProvincia) {
    let json = {
      codigoProvincia: codigoProvincia,
      codigoDepartamento: codigoDepartamento
    }
    return ajaxRequest({
      url: '../UbigeoServlet',
      dataType: 'json',
      type: 'POST',
      body: {
        accion: 'listarDistrito',
        json: JSON.stringify(json)
      }
    })
  }
}
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')
  })
  .catch(err => {
    console.log(err)
  })
asignarEventos()