// {} Librerías e importaciones

// ! Utilidades
import { formatoNumerico } from '../../../utilidades.js';

// {}
(() => {

  // ! Declaración de variables
  let
    peticion = {},
    campo = { estadistica: window.aplicacion.campo.selector.estadistica },
    grafica = {
      elemento: document.querySelector('#grafica'),
      renderizar: () => {

        if (grafica.valores && grafica.valores.length) {

          grafica.encabezados = grafica.valores.map(valor => valor.x);
          grafica.datos = grafica.valores.map(valor => Number(valor.y))

        } else {

          grafica.valores = [];
          grafica.encabezados = [];
          grafica.datos = []

        }

        grafica.configuracion.title.text = estadistica.selectedOptions[0]?.textContent ?? '';

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

          grafica.configuracion.series = [{ name: 'Total', data: grafica.valores }];

          grafica.configuracion.labels = [];

          grafica.configuracion.colors = [];

          grafica.configuracion.dataLabels.formatter = (valor) => formatoNumerico(valor, 2)

        } else {

          grafica.configuracion.series = grafica.datos;

          grafica.configuracion.labels = grafica.encabezados;

          grafica.configuracion.colors = [];

          grafica.configuracion.dataLabels.formatter = (valor) => formatoNumerico(valor, 2) + '%'

        }

        if (grafica.renderizada) {

          grafica.instancia.destroy();

          grafica.renderizada = false

        }

        grafica.instancia = new ApexCharts(grafica.elemento, grafica.configuracion);

        grafica.instancia.render();

        grafica.renderizada = true

      },
      configuracion: {
        legend: {
          show: true,
          position: 'bottom',
          fontFamily: 'var(--bs-body-font-family)',
          fontWeight: 'var(--bs-body-font-weight)',
          fontSize: 'var(--bs-font-size)',
          foreColor: 'var(--bs-body-color)',
          onItemClick: {
            toggleDataSeries: false
          }
        },
        series: [],
        noData: { text: '' },
        chart: {
          type: 'bar',
          height: 500,
          fontFamily: 'var(--bs-body-font-family)',
          fontWeight: 'var(--bs-body-font-weight)',
          fontSize: 'var(--bs-font-size)',
          foreColor: 'var(--bs-body-color)',
          toolbar: { show: false }
        },
        plotOptions: {
          bar: {
            borderRadius: 0,
            dataLabels: {
              position: 'top',
              total: {
                enabled: false,
                formatter: undefined,
                offsetX: 0,
                offsetY: 0,
                style: {
                  color: '#373d3f',
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600
                }
              }
            },
            distributed: true
          }
        },
        dataLabels: {
          enabled: true,
          formatter: (valor) => {

            valor = formatoNumerico(valor, 2);

            if (grafica.configuracion.chart.type === 'pie')
              valor += '%'
            ;

            return valor

          },
          offsetY: -20,
          style: {
            fontFamily: 'var(--bs-body-font-family)',
            fontWeight: 'var(--bs-body-font-weight)',
            fontSize: 'var(--bs-font-size)'
          }
        },
        xaxis: {
          position: 'top',
          axisBorder: { show: true },
          axisTicks: { show: true },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5
              }
            }
          },
          tooltip: { enabled: true }
        },
        yaxis: {
          axisBorder: { show: true },
          axisTicks: { show: true },
          labels: {
            show: true,
            formatter: (valor) => formatoNumerico(valor, 2)
          }
        },
        title: {
          text: '',
          floating: false,
          align: 'center',
          style: {
            fontFamily: 'var(--bs-body-font-family)',
            fontSize: '22px',
            color: 'var(--bs-tertiary)'
          }
        }
      }
    }

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

    campo.estadistica.peticion('opciones')

  });

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

    if (!this.value) {

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

      return grafica.renderizada = false

    }

		peticion.actual && peticion.actual.abort();

		peticion.actual = $.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.chart.type = respuesta.tipo === 'BARRA' ? 'bar' : 'pie'

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

    await peticion.actual;

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

        grafica.valores = respuesta;

        grafica.renderizar()

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

  })

})()