// {} Librerías e importaciones

// ! Configuraciones

// + Tabla
$('script[src*="dataTable"]').length &&
import('../aplicacion/configuraciones/tabla.js');

// + Selector
import { inicializarSelector } from './configuraciones/selector.js';

// ! Utilidades
import { pluralizarFrase, tablaRegistros, peticion } from '../utilidades.js';

// ! Procedimientos
import { procedimientos } from '../aplicacion/configuraciones/procedimientos.js';

// {}
(function() {

  // ! Declaración de variables
  let
    campoAnterior = null,
    peticionActual = null,
    ventanaDialogo = {
      consulta: {
        tabla: null,
        campo: null
      }
    }
  ;

  // ! Condición para verificar si existe la librería
  // ! select2 en la página e inicializar los selectores
  // ! con la librería
  $('script[src*="select2"]').length &&
    inicializarSelector()
  ;

  // !
  // new MutationObserver(function(listaMutaciones, observador) {

  //   for(var mutacion of listaMutaciones)
  //     mutacion.type === 'childList' &&
  //       $(mutacion.addedNodes)
  //         .each(function(campo, valor) {

  //           // Declaración de variables
  //           let selector = null;

  //           // Condición cortocircuito para verificar
  //           // si el elemento que se ha detectado
  //           // en el documento es una opción del selector
  //           // para guardar el selector de esa opción
  //           $(valor).is('option') && (
  //             selector = $(valor).parent()[0]
  //           );

  //           // Condición cortocircuito para verificar
  //           // si el selector existe y comprobar si contiene
  //           // dos opciones y la primera de la opción es igual a
  //           // '' o 'crearRegistro' para deshabilitar el selector y
  //           // seleccionar la segunda opción
  //           !!selector &&
  //           $(selector).prop({
  //             disabled: selector.options.length <= 1,
  //             selectedIndex: Number(
  //               selector.options.length &&
  //               selector.options[0].value === 'crearRegistro'
  //             )
  //           }).change()

  //         })

  // }).observe(document.body, {

  // childList: true,
  // subtree: true

  // });

  // !
  $('input[type="text"]').each(function(indice, elemento) {

    this.id.includes('id_') &&
    $(this).on('input', function() {

      this.value = this.value.replace(/[^0-9]/g, '')

    })

  });
  // !
  $('input[type="checkbox"]').each(function(indice, elemento) {

    this.value = Number(this.checked)

    $(this).change(function() {

      this.value = Number(this.checked)

    })

  });

  // !
  $('select').each(function(indice, elemento) {

    (
      this.getAttribute('tabla') ??
      this.getAttribute('procedimiento')
    ) &&
    traerOpcionesSelector(this)

  });

  // !
  $('textarea').on('input', function(evento) {

    this.style.height = 'auto';
    this.style.height = `${this.scrollHeight}px`

  });

  // !
  $('form').on('submit reset', function(evento) {

    // +
    if (evento.type === 'reset') {

      $('.is-invalid', this).removeClass('is-invalid');
  
      setTimeout(() => {

        $('select', this).map(function(indice, campo) {

          $(campo).change()

        });

        $('textarea').trigger('input')

      }, 1)

      return

    }

    // +
    if (
      $(':focus')[0]?.id !== 'botonGuardar' &&
      !/Android|iPhone|iPad|iPod|Mobile|Tablet/i.test(navigator.userAgent)
    )
    return;

    // +
    $(':disabled')
      .addClass('campoDeshabilitar')
      .prop('disabled', false)

  });

  // !
  $('.input-group .botonActualizar').click(function(evento) {

    campoAnterior = this;

    traerOpcionesSelector(this)

  });

  // !
  $('button[data-bs-target="#ventanaDialogoConsulta"]').click(function() {

    ventanaDialogo.consulta.tabla = this.getAttribute('tabla');
    ventanaDialogo.consulta.campo = this.getAttribute('campo');

    $('#tituloVentanaDialogoConsulta').text(`
      Consulta de ${
        this.getAttribute('titulo') ??
        pluralizarFrase(ventanaDialogo.consulta.campo)
      }
    `)

  });

  // !
  $('.modal').on('show.bs.modal', function() {});

  // !
  $('.modal').on('shown.bs.modal', function() {

    $('table.dataTable', this).DataTable().columns.adjust().draw();

    switch (this.id) {

      case 'ventanaDialogoConsulta':

        $('#tablaRegistrosConsulta:not(.dataTable)', this).length &&
        tablaRegistros({
          tabla: $('#tablaRegistrosConsulta'),
          columnas: [
            {
              title: 'Registro',
              data: 'registro',
              className: '',
              type: 'string'
            },
            {
              title: 'ID',
              data: 'id',
              className: '',
              type: 'num'
            }
          ],
          peticion: {
            datos: {
              ruta: `${window.ruta.aplicacion}/ejecutarPeticion?procedimiento=p_traer_registros_consulta_principal`,
              parametros: {
                origen_registros: ventanaDialogo.consulta.tabla,
                campos: procedimientos
                  .p_traer_registros_consulta_principal
                  .parametros
                  .campos(
                    ventanaDialogo.consulta.tabla,
                    ventanaDialogo.consulta.campo
                  )
                ,
                campo_ordenar: `id_${ventanaDialogo.consulta.campo} ASC`,
                sql: `id_${ventanaDialogo.consulta.campo} = 0`
              }
            }
          },
          configuracion: {
            dom: `
              <'row'
                <'col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6 contenedorCampoConsulta'>
                <'col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6'f>
              >
              <'row'<'col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12't>>
            `
          }
        });

        $('#campoConsulta').focus()

      break;
    
      default:
      break;

    }

  });

  // !
  $('.modal').on('hide.bs.modal', function() {

    $('form', this)[0]?.reset();
    $('.is-invalid', this).removeClass('is-invalid');

    switch (this.id) {

      case 'ventanaDialogoConsulta':

        $('.dataTables_scrollBody .dataTable', this)
          .DataTable()
          .clear()
          .draw()

      break;

      default:
      break;

    }

  });

  // !
  $('.modal').on('hidden.bs.modal', function() {});

  // !
  $('table[seleccionable] tbody').on('click dblclick', 'tr', function(evento) {

    // +
    let tipoSeleccion = $(this)
      .closest('table')[0]
      .getAttribute('seleccionable')
    ;

    if (
        evento.type === 'click' &&
        tipoSeleccion === 'doble'
      )
        return
      ;

    tipoSeleccion != 'multiple' &&
    // $(evento.target).parent()[0] !== $('tr.active', this)[0] &&
    $('tr.active', evento.delegateTarget).removeClass('active');

    $(this).not('tr:has(.dataTables_empty)').toggleClass('active')

  });

  // !
  // $('table').on('draw.dt', function() {

  //   setTimeout(() => {
      
  //     $(this).parent().animate({
  //       scrollTop: $(this).DataTable().row('.active').node()?.offsetTop
  //     }, 500)

  //   }, 1)

  // })

  // !
  $('#tablaRegistrosConsulta tbody').dblclick('tr', function(evento) {

    // +
    let
      tabla = {
        cuerpo: $(this).parent()
      },
      campoIdRegistro = $(`#id_${ventanaDialogo.consulta.campo}`)
    ;

    // +
    if ($('tr:has(.dataTables_empty)', tabla.cuerpo).length)
      return;

    // +
    $(campoIdRegistro)
      .val($('.active :last', tabla.cuerpo).text())
      .trigger('focusout')
    ;

    // +
    $('#ventanaDialogoConsulta').modal('hide')

  });

  // !
  $('#ventanaDialogoConsulta .modal-footer .btn-primary').click(function(evento) {

    $('#tablaRegistrosConsulta tr.active td').trigger('dblclick')

  });

  // !
  $('#ventanaDialogoConsulta #tablaRegistrosConsulta').on('init.dt', function() {

    $(`#formularioVentanaDialogoConsulta`).on('submit', function(evento) {

      evento.preventDefault();

      $('#tablaRegistrosConsulta')
        .dataTable()
        .fnSettings()
        .ajax
        .data
        .origen_registros = ventanaDialogo.consulta.tabla
      ;

      $('#tablaRegistrosConsulta')
        .dataTable()
        .fnSettings()
        .ajax
        .data
        .campo_ordenar = `
          id_${ventanaDialogo.consulta.campo} ASC
        `
      ;

      $('#tablaRegistrosConsulta')
        .dataTable()
        .fnSettings()
        .ajax
        .data
        .campos = procedimientos
          .p_traer_registros_consulta_principal
          .parametros
          .campos(
            ventanaDialogo.consulta.tabla,
            ventanaDialogo.consulta.campo
          )
      ;

      $('#tablaRegistrosConsulta')
        .dataTable()
        .fnSettings()
        .ajax
        .data
        .sql = procedimientos
          .p_traer_registros_consulta_principal
          .parametros
          .sql(
            ventanaDialogo.consulta.tabla,
            ventanaDialogo.consulta.campo
          )
      ;

      $('#tablaRegistrosConsulta').DataTable().ajax.reload()

    })

  });

  // !
  $('#ventanaDialogoConsulta #tablaRegistrosConsulta').on('xhr.dt', function() {

    $('#campoConsulta').focus()

  });

  function traerOpcionesSelector(elemento) {

    // + Declaración de variables
    var selector = {
      elemento: null,
      id: null,
      valor: null,
      deshabilitado: null,
      peticion: {
        tabla: null,
        campo: null,
        procedimiento: null,
        ruta: null,
        parametros: null
      }
    };

    // +
    selector.elemento = elemento.tagName === 'SELECT'
      ? elemento
      : $(elemento).parent().find('select')[0]
    ;

    // +
    selector.id = selector.elemento.id.replace('VentanaDialogo', '');
    selector.valor = selector.elemento.value;
    selector.deshabilitado = selector.elemento.getAttribute('disabled') === '';
    selector.peticion.tabla = selector.elemento.getAttribute('tabla');
    selector.peticion.campo = selector.id.replace('id_', '');
    selector.peticion.procedimiento =
      selector.elemento.getAttribute('procedimiento') ??
      'p_traer_registros_consulta_principal'
    ;
    selector.peticion.ruta = `
      ${window.ruta.aplicacion}/ejecutarPeticion?procedimiento=${selector.peticion.procedimiento}
    `;
    selector.peticion.parametros =
      selector.elemento.getAttribute('parametros') ?? {
        origen_registros: selector.peticion.tabla,
        campos:
          procedimientos
            .p_traer_registros_consulta_principal
            .parametros
            .campos(
              selector.peticion.tabla,
              selector.peticion.campo,
              false
            )
      }
    ;

    if (!!selector.elemento.getAttribute('parametros')) {

      let parametrosPeticionSelector =
        selector
        .peticion
        .parametros
        .split(',')
      ;

      selector.peticion.parametros = {};

      parametrosPeticionSelector.forEach(function(parametroPeticionSelector) {

        let [nombreParametroSelector, valorParametroSelector] =
          parametroPeticionSelector.split(':')
        ;

        selector.peticion.parametros[nombreParametroSelector] =
          valorParametroSelector

      })

    }

    // + Petición hacía el
    // + controlador 'traerRegistros'
    peticionActual = peticion({
      ruta: selector.peticion.ruta,
      parametros: selector.peticion.parametros,
      funcion: {
        antesEnviarPeticion: function(peticion, configuracion) {

          // *
          $(`#${selector.elemento.id}, .botonActualizar`).prop('disabled', true) &&
            $('i.fa-solid.fa-rotate', elemento).addClass('fa-spin')
          ;

          $($('option:first', selector.elemento).val() === 'crearRegistro'
            ? 'option:not(:first)'
            : 'option'
            ,
            selector.elemento
          ).remove();

        },
        peticionExitosa: function(respuesta, estado, peticion) {

          selector.id !== 'tipo_reporte' &&
            respuesta.length > 1 &&
            $(selector.elemento).append(`<option></option>`)
          ;

          // * Iteración para recorrer todos los registros
          // * de la petición realizada
          respuesta.forEach((registro, indiceFila) => {

            // Añadiendo el contenido a la tabla #tablaRegistrosConsulta
            $(selector.elemento).append(`

              <option value="${registro[`${selector.id}`]}">
                ${registro[`${selector.peticion.campo}`]}
              </option>

            `);

          });

          selector.deshabilitado || respuesta.length <= 1
            ? selector.elemento.setAttribute('disabled', '')
            : selector.elemento.removeAttribute('disabled', '')
          ;

          $('.botonActualizar').prop('disabled', false) &&
            $('i.fa-solid.fa-rotate', elemento)
              .removeClass('fa-spin')
            ;

          elemento.type === 'button' &&
          $(selector.elemento).val(selector.valor)

        },
        peticionNoExitosa: function(peticion, configuracion) {}
      },
    })

  }

})()