(() => {

  let
    campo = { estadistica: window.aplicacion.campo.selector.estadistica },
    estilos = { variables: getComputedStyle(document.documentElement) },
    grafica = {
      configuracion: {
        data: { datasets: [] },
        options: {
          showLine: true,
          responsive: true,
          color: () => estilos.variables.getPropertyValue('--bs-body-color'),
          // title: {
          //   display: true,
          //   font: {
          //     family: () => estilos.variables.getPropertyValue('--bs-body-font-family'),
          //     weight: () => estilos.variables.getPropertyValue('--bs-heading-weight'),
          //     lineHeight: () => estilos.variables.getPropertyValue('--bs-heading-line-height')
          //   }
          // },
          plugins: {
            legend: {
              labels: {
                font: {
                  family: () => estilos.variables.getPropertyValue('--bs-body-font-family'),
                  weight: () => estilos.variables.getPropertyValue('--bs-body-font-weight'),
                  lineHeight: () => estilos.variables.getPropertyValue('--bs-body-line-height'),
                  size: () => estilos.variables.getPropertyValue('--bs-body-font-size'),
                  color: () => estilos.variables.getPropertyValue('--bs-body-color')
                }
              }
            }
          }
        }
      }
    }
  ;

  $(id_modulo).change(function(evento) {

    campo.estadistica.peticion('opciones')

  });

  $(estadistica).change(async function(evento) {

    if (!this.value)
      return grafica.instancia && grafica.instancia.destroy()
    ;

    await $.ajax({
      url: `${window.aplicacion.enlace}/ejecutar`,
      data: {
        procedimiento: 'p_traer_unico_registro',
        renglon: 'INFORME',
        id_renglon: this.value
      },
      beforeSend: (peticion, configuracion) => {},
      success: function(respuesta, estado, peticion) {

        if (!respuesta.length)
          return
        ;

        respuesta = respuesta[0];

        grafica.configuracion.type = respuesta.tipo === 'BARRA' ? 'bar' : 'pie'

      },
      error: function (peticion, estado) { },
      complete: (peticion, estado) => {}
    });

    $.ajax({
      url: `${window.aplicacion.enlace}/ejecutar`,
      data: {
        procedimiento: 'p_traer_informes',
        id_informe: this.value
      },
      beforeSend: (peticion, configuracion) => {},
      success: function(respuesta, estado, peticion) {

        grafica.configuracion.data.labels = [];

        grafica.configuracion.data.datasets[0] = {
          label: estadistica.selectedOptions[0]?.textContent ?? '',
          order: 0
        };

        if (grafica.configuracion.type === 'bar') {

          grafica.configuracion.data.datasets[0].data = respuesta;
          grafica.configuracion.data.datasets[0].borderColor = estilos.variables.getPropertyValue('--bs-tertiary-dark');
          grafica.configuracion.data.datasets[0].backgroundColor = estilos.variables.getPropertyValue('--bs-tertiary')

        } else {

          grafica.configuracion.data.labels = respuesta.map(valor => valor.x);
          grafica.configuracion.data.datasets[0].data = respuesta.map(valor => valor.y)

        }

        // grafica.configuracion.options.title.text = grafica.configuracion.data.datasets[0].label;

        if (grafica.instancia)
          grafica.instancia.destroy()
        ;

        grafica.instancia = new Chart('grafica', grafica.configuracion)

      },
      error: function (peticion, estado) { },
      complete: (peticion, estado) => {}
    })

  })

})()