import { formatoNumerico } from "../../utilidades.js";

// 
var tabla = {
  contenedor: null,
  elemento: null,
  impresion: {
    cabecera: `
      <div class="row">
        <div
          class="
            col-12
            col-sm-12
            col-md-12
            col-lg-12
            col-xl-12
            col-xxl-12
          "
          style="
            border: 1px solid var(--colorPrimario);
            border-top: 15px solid var(--colorPrimario);
            border-radius: 5px;
            padding: 5px
          "
        >
          <div class="row">

            <div
              class="
                col-8
                col-sm-8
                col-md-8
                col-lg-8
                col-xl-8
                col-xxl-8
              "
              style="
                border-right: 1px solid var(--colorPrimario);
                align-self: center;
                padding: 5px
              "
            >

              <img
                src="
                  http://daite.com.do/logos/{carpeta}/logotipo.png
                "
                alt="{empresa}"
                style="
                  width: auto;
                  height: 34px;
                  margin: 5px 0
                "
              />

              <p>
                {empresa}

                <br />

                {ubicacion}

                <br />

                Teléfono: {telefono}

                <br />

                RNC: {rnc}
              </p>

            </div>

            <div
              class="
                col-4
                col-sm-4
                col-md-4
                col-lg-4
                col-xl-4
                col-xxl-4
              "
              style="
                align-self: center;
                padding: 5px
              "
            >
              <div class="row">

                <div
                  class="
                    col-6
                    col-sm-6
                    col-md-6
                    col-lg-6
                    col-xl-6
                    col-xxl-6
                  "
                >

                  <p>
                    Fecha:

                    <br />

                    Hora:

                    <br />

                    Página:

                    <br />

                    Usuario:
                  </p>

                </div>

                <div
                  class="
                    col-6
                    col-sm-6
                    col-md-6
                    col-lg-6
                    col-xl-6
                    col-xxl-6
                  "
                >

                  <p class="text-end">
                    <span class="fecha"></span>

                    <br />

                    <span class="hora"></span>

                    <br />

                    <span class="pagina"></span>/<span class="paginas"></span>

                    <br />

                    {usuario}
                  </p>

                </div>

              </div>
            </div>

          </div>
        </div>
      </div>
    `
  }
};

$.extend(
  true,
  $.fn.dataTable.defaults, {

    // !
    order: [],
    ordering: true,
    // orderMulti: true,
    pageLength: 500,

    scrollY: '45vh',
    scrollCollapse: true,

    deferRender: true,

    // ! 
    language: {
      sProcessing:     "Procesando...",
      sLengthMenu:     "Mostrar _MENU_ registros",
      sZeroRecords:    "",
      sEmptyTable:     "",
      sInfo:           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
      sInfoEmpty:      "Mostrando registros del 0 al 0 de un total de 0 registros",
      sInfoFiltered:   "(filtrado de un total de _MAX_ registros)",
      sSearch:         "",
      sInfoThousands:  ",",
      sLoadingRecords: "Cargando...",
      oPaginate: {
          sFirst:    "Primero",
          sLast:     "Último",
          sPrevious: '<i class="fa-solid fa-arrow-left"></i>',
          sNext:     '<i class="fa-solid fa-arrow-right"></i>'
      },
      oAria: {
          sSortAscending:  ": Activar para ordenar la columna de manera ascendente",
          sSortDescending: ": Activar para ordenar la columna de manera descendente"
      },
      buttons: {
          "copy": "Copiar",
          "colvis": "Visibilidad"
      }
    },

    // !
    columnDefs: [{
      targets: '_all',
      render: function(datoCelda, tipoRenderizado, datosFila) {

        if (tipoRenderizado === 'display') {

          /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}.\d{3}$/.test(datoCelda) && (
            datoCelda = new Date(datoCelda).toLocaleDateString('uk').replaceAll('.', '/')
          )

        }

        return datoCelda

      }
    }],

    dom: `
      <'row justify-content-between align-items-center'<'col-auto'B><'col-auto'f>>
      <'row'<'col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12't>>
      <'row'<'col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12'p>>
    `,
    buttons: [
      // {
      //     extend: 'colvis',
      //     className: 'btn btn-primary buttons-colvis',
      //     text: 'Columnas <i class="fa-solid fa-eye"></i>'
      // },
      {
        extend: 'print',
        className: 'btn buttons-print',
        text: 'Imprimir <i class="fa-solid fa-print px-1"></i>',
        title: '',
        footer: true,
        messageTop:
          tabla.impresion.cabecera
            .replace('{carpeta}', 'daite')
            .replaceAll('{empresa}', 'DAITE S.R.L')
            .replace('{ubicacion}', 'AV. HISPANOAMERICANA, MÓDULO 302, SANTIAGO, REPÚBLICA DOMINICANA')
            .replace('{telefono}', '+1 (829) 971-3264')
            .replace('{rnc}', '130-08660-5')
            .replace('{usuario}', 'NULL'),
        exportOptions: {
          page: 'current',
          columns: ':visible'
        },
        customize: function(ventanaEmergente) {

          // 
          var
            documento = ventanaEmergente.document,
            calendario = new Date().toLocaleString(`es-419`, {
              hour12: true,
              day: '2-digit',
              month: '2-digit',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit'
            }).split(', '),
            fecha = calendario[0],
            hora = calendario[1]
          ;

          $(documento)
            .find('h1')
              .remove()
          ;

          $(documento.body)
            .find('.fecha')
            .text(fecha)
            
          $(documento.body)
            .find('.hora')
            .text(hora)
            
          $(documento.body)
            .find('.pagina')
            .text('00')

          $(documento.body)
            .find('.paginas')
            .text('00')
          ;

          $(documento)
            .find('thead')
              .prepend(`

                <tr>
                  <th colspan="100%">
                    <p class="title text-center">
                      ${document.title}
                    </p>
                  </th>
                </tr>

              `)

        }
      },
      // {
      //   extend: 'pdfHtml5',
      //   className: 'btn buttons-pdf',
      //   text: 'PDF <i class="fa-regular fa-file-pdf px-1"></i>',
      //   orientation: 'portrait',
      //   pageSize: 'A4',
      //   footer: true,
      //   exportOptions: {
      //     page: 'current',
      //     columns: ':visible'
      //   },
      //   customize: function(documento) {

      //     // 
      //     var
      //       tablaDatos = {
      //         columnas: tabla.elemento.DataTable().settings().init().columns
      //       },
      //       PDF = {
      //         columnas: documento.content[1].table.body
      //       };

      //     PDF.columnas.forEach(function(columna, indice1) {

      //       columna.forEach(function(celda, indice2) {

      //         celda.alignment = tablaDatos.columnas[indice2].className.match(/\b(left|center|right)\b/g)[0]

      //       })

      //     });

      //     documento.pageMargins = [15, 15, 15, 15];

      //     documento.header = {
      //       margin: [15, 0, 0, 15],
      //       columns: [{
      //         text: 'Daite', style: 'logo'
      //       }, {
      //         text: 'Daite', style: 'title'
      //       }, {
      //         text: 'Fecha: ', style: 'date'
      //       }, {
      //         text: 'Usuario: ', style: 'username'
      //       }]
      //     }

      //     documento.content[0].margin = [0, 0, 0, 0];

      //     documento.content[1].table.widths = Array(documento.content[1].table.body[0].length + 1).join('*').split('');

      //     documento.defaultStyle.fontSize = 6;

      //     documento.styles.tableHeader.fontSize = 8;
      //     documento.styles.tableHeader.fillColor = '#005cac';
      //     documento.styles.tableFooter.fontSize = 8;
      //     documento.styles.tableFooter.fillColor = '#005cac';

      //     documento.styles.tableBodyOdd.fillColor = '#e5eef7';

      //   }
      // },
      {
        extend: 'excelHtml5',
        className: 'btn buttons-excel',
        text: 'EXCEL <i class="fa-regular fa-file-excel px-1"></i>',
        footer: true,
        exportOptions: {
          page: 'current',
          columns: ':visible'
        }
      }
    ],
    initComplete: function() {

      $('.dataTables_wrapper')
        .has(this)
        .find('.contenedorCampoConsulta')
        .append(`
          <form id="formularioVentanaDialogoConsulta">
            <div class="input-group ">

              <div class="form-floating ">

                <input
                  type="text"
                  class="form-control"
                  id="campoConsulta"
                  name="campoConsulta"
                  value=""
                >

                <label for="campoConsulta">
                  Buscar
                </label>

              </div>

              <button
                type="submit"
                class="btn btn-primary"
                id="botonBuscarConsulta"
                tabindex="-1"
              >
                <i class="fa-solid fa-magnifying-glass"></i>
              </button>

            </div>
          </form>
        `)
      ;

      $('.dataTables_wrapper')
        .has(this)
        .find('.dataTables_filter')
        .parent()
        .append(`
          <div class="form-floating">

            <label>
              Buscar Actual
            </label>

          </div>
        `)
      ;

      $('.dataTables_wrapper')
        .has(this)
        .find('.dataTables_filter ~ .form-floating')
        .prepend(
          $('.dataTables_filter input')
        )
      ;

      $('.dataTables_filter').remove();

      tabla.elemento = this;

      tabla.elemento
        .parent()
        .parent()
        .find('.dataTables_scrollHead th:not(.d-none)')
        .first()
        .css('border-top-left-radius', '5px')
      ;

      tabla.elemento
        .parent()
        .parent()
        .find('.dataTables_scrollHead th:not(.d-none)')
        .last()
        .css('border-top-right-radius', '5px')
      ;

      tabla.elemento
        .parent()
        .parent()
        .find('.dataTables_scrollFoot th:not(.d-none)')
        .first()
        .css('border-bottom-left-radius', '5px')
      ;

      tabla.elemento
        .parent()
        .parent()
        .find('.dataTables_scrollFoot th:not(.d-none)')
        .last()
        .css('border-bottom-right-radius', '5px')
      ;

      // 
      $('.dt-buttons').removeClass('flex-wrap');

      $('#campoConsulta').focus()

    },
    drawCallback: function() {

      // 
      let
        api = this.api(),
        columnas = this.DataTable().settings().init().columns

      // $(api.column(0, { page: 'current' }).footer())
      //   .html(api.rows({ page: 'current' }).count());

      !!columnas &&
      columnas.forEach(function(columna, indice) {

        if (columna.className?.match(/\b(sumar)\b/g)) {

          let columnaActual = api.column(indice, {page: 'current'});

          let sumaCeldasColumnaActual =
            columnaActual
              .data()
                .sumar()
          ;

          $(columnaActual.footer())
            .html(
              formatoNumerico(sumaCeldasColumnaActual, 2)
            )

        } else if (columna.className?.match(/\b(agrupar)\b/g)) {

          $(tablaRegistros)
            .DataTable()
            .order([[indice, 'asc']])
          ;

          $(tablaRegistros)
            .DataTable()
            .rowGroup()
            .enable()
            .dataSrc(columna.data)

        }

      });

    }

});

$.fn.dataTable.Api.register('sumar()', function() {

  return (

    this
      .flatten()
        .reduce(function(valorSumado = 0, valor = 0) {

          typeof valorSumado === 'string' && (
            valorSumado = valorSumado.replace(',', '') * 1
          )

          typeof valor === 'string' && (
            valor = valor.replace(',', '') * 1
          )

          return valorSumado + valor

        }, 0)

  )

})