const jqueryValidateConfig = () => {
  function stripHtml(value) {
    // remove html tags and space chars
    return value.replace(/<.[^<>]*?>/g, ' ').replace(/&nbsp;|&#160;/gi, ' ')
      // remove numbers and punctuation
      .replace(/[0-9.(),;:!?%#$'"_+=\/-]*/g, '')
  }

  jQuery.validator.addMethod('lettersonly', function (value, element) {
    return this.optional(element) || /^[a-z\s]+$/i.test(value)
  }, 'Solo letras.')
  jQuery.validator.setDefaults({
    debug: true,
    ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
    errorClass: 'validation-error-label',
    successClass: 'validation-valid-label',
    highlight: function (element, errorClass) {
      $(element).removeClass(errorClass)
    },
    unhighlight: function (element, errorClass) {
      $(element).removeClass(errorClass)
    },
    // Different components require proper error label placement
    errorPlacement: function (error, element) {

      // Styled checkboxes, radios, bootstrap switch
      if (element.parents('div').hasClass('checker') || element.parents('div').hasClass('choice') || element.parent().hasClass('bootstrap-switch-container')) {
        if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
          error.appendTo(element.parent().parent().parent().parent())
        } else {
          error.appendTo(element.parent().parent().parent().parent().parent())
        }
      }

      // Unstyled checkboxes, radios
      else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
        error.appendTo(element.parent().parent().parent())
      }

      // Input with icons and Select2
      else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
        error.appendTo(element.parent())
      }

      // Inline checkboxes, radios
      else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
        error.appendTo(element.parent().parent())
      }

      // Input group, styled file input
      else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
        error.appendTo(element.parent().parent())
      } else {
        error.insertAfter(element)
      }
    }
  })
}
const ajaxRequest = obj => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: obj.url,
      type: obj.type,
      dataType: obj.dataType,
      data: obj.body,
      beforeSend: (xhr, settings) => {
      }, success: (response, textStatus, jqXHR) => {
        resolve(response)
      }, error: (jqXHR, textStatus, errorThrown) => {
        reject({
          status: textStatus,
          message: `Error making the request`,
          request: obj
        })
      }
    })
  })
}
const persona = {
  listar() {
    let txtCriterioBusqueda = $('#txt-busqueda').val().trim()
    return new Promise((resolve) => {
      $('#tbl-persona').DataTable({
        language: {
          paginate: {'next': '&rarr; ', 'previous': ' &larr;'},
          emptyTable: 'No hay registros'
        },
        ajax: {
          url: '../PersonaServlet?accion=listarPersona',
          type: 'POST',
          dataType: 'json',
          data: {search: txtCriterioBusqueda}
        },
        columnDefs: [
          {targets: 0, orderable: false, width: '5%', className: 'centrado'},
          {targets: 1, orderable: false, width: '15%', className: 'centrado'},
          {targets: 2, orderable: false, width: '30%', className: 'centrado'},
          {targets: 3, orderable: false, width: '5%', className: 'centrado'},
          {targets: 4, orderable: false, width: '25%', className: 'centrado'},
          {targets: 5, orderable: false, width: '10%', className: 'centrado'},
          {targets: 6, orderable: false, width: '10%', className: 'centrado'}
        ],
        dom: '<"datatable-scroll"t><"datatable-footer"ip>',
        fixedColumns: true,
        processing: true,
        serverSide: true,
        responsive: true,
        iDisplayLength: 10,
        bSort: false,
        bInfo: false,
        searching: false,
        bLengthChange: false,
        bFilter: false,
        aaSorting: [],
        ordering: false,
        scrollX: false,
        ScrollCollapse: true,
        columns: [
          {data: 'item'},
          {data: 'dni'},
          {
            data: null,
            render: function (data, type, row) {
              return data.apellidos + ', ' + data.nombres
            }
          },
          {data: 'edad', className: 'text-center'},
          {data: 'correo'},
          {
            data: 'estado',
            className: 'text-center',
            render: function (data, type, row) {
              return data === '1' ? '<span class="label label-success">activo</span>' : '<span class="label label-danger">inactivo</span>'
            }
          },
          {
            data: null,
            className: 'text-center',
            render: function (data, type, row) {
              // debugger
              return `<ul class="icons-list">
                                        <li title="Editar" data-toggle="modal" data-target="#modal_editar_persona" class="text-primary-600">
                                            <a href="#" class="editarPersona"><i class="icon-pencil7"></i></a>
                                        </li>
                                        <li title="${data.estado === '1' ? 'Desactivar' : 'Activar'}" class="${data.estado === '1' ? 'text-success-600' : 'text-danger-600'}">
                                            <a href="#" class="estado"><i class="icon-switch2"></i></a>
                                        </li>
                                    </ul>`
            }
          }
        ],
        'fnInitComplete': function (oSettings, json) {
          resolve(json)
        }
      })
    })
  },
  cambiarEstado(datos) {
    return ajaxRequest({
      url: '../PersonaServlet',
      type: 'POST',
      dataType: 'json',
      body: {
        accion: 'cambiarEstado',
        json: JSON.stringify(datos)
      }
    })
  },
  registrar() {
    let json = {
      dni: $('#txt_numero_documento').val().trim(),
      apellidos: $('#txt_apellidos').val().trim(),
      nombres: $('#txt_nombres').val().trim(),
      edad: $('#txt_edad').val().trim(),
      correo: $('#txt_correo').val().trim()
    }
    return ajaxRequest({
      url: '../PersonaServlet',
      type: 'POST',
      dataType: 'json',
      body: {
        accion: 'registrarPersona',
        json: JSON.stringify(json)
      }
    })
  },
  editar() {
    let json = {
      apellidos: $('#txt_apellidos_editar').val().trim(),
      nombres: $('#txt_nombres_editar').val().trim(),
      edad: $('#txt_edad_editar').val().trim(),
      correo: $('#txt_correo_editar').val().trim(),
      codigo: localStorage.getItem('codigoPersona')
    }
    return ajaxRequest({
      url: '../PersonaServlet',
      type: 'POST',
      dataType: 'json',
      body: {
        accion: 'editarPersona',
        json: JSON.stringify(json)
      }
    })
  },
  recargarTabla() {
    $('#tbl-persona').DataTable().destroy()
    this.listar()
  }
}
const obtenerDatosTabla = (fila) => {
  return $('#tbl-persona').DataTable().row(fila).data()
}
const limpiarCajasTexto = () => {
  $('#btn_agregar_persona').on('click', function () {
    $('#txt_numero_documento').attr({
      autofocus: true
    }).val('')
    $('#txt_apellidos').val('')
    $('#txt_nombres').val('')
    $('#txt_edad').val('')
    $('#txt_correo').val('')
  })
}
const asignarEventos = () => {
  $('#tbl-persona tbody').on('click', '.estado', (event) => {
    let rowData = obtenerDatosTabla($(event.currentTarget).parents('tr'))
    swal({
      title: '¿Estás seguro?',
      text: `¿Desea ${rowData.estado === '1' ? 'DESACTIVAR' : 'ACTIVAR'} a ${rowData.apellidos} ${rowData.nombres}?`,
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#EF5350',
      confirmButtonText: 'Si',
      cancelButtonText: 'No',
      closeOnConfirm: false,
      closeOnCancel: true
    }, (isConfirm) => {
      if (isConfirm) {
        persona.cambiarEstado(rowData)
          .then((data) => {
            customSwal
              .alert('¡Exito!', 'Se actualizó con exito.', 'success')
              .then(() => {
                persona.recargarTabla()
              })
          })
          .catch((data) => {
            customSwal.alert('¡Error!', 'No se registró con exito.', 'error')
          })
      }
    })
  })

  document.querySelectorAll('.estado').forEach((e) => {
    console.log(e)
    e.addEventListener('click', (ev) => {
      console.log(getClosest(ev.target, 'tr').rowIndex - 1)
    })
  })

  $('#tbl-persona  tbody').on('click', '.editarPersona', (event) => {
    let rowData = obtenerDatosTabla($(event.currentTarget).parents('tr'))
    $('#txt_numero_documento_editar').val(rowData.dni)
    $('#txt_apellidos_editar').val(rowData.apellidos)
    $('#txt_nombres_editar').val(rowData.nombres)
    $('#txt_edad_editar').val(rowData.edad)
    $('#txt_correo_editar').val(rowData.correo)
    localStorage.setItem('codigoPersona', rowData.codigo)
  })

  $('#btn_registrar_persona').on('click', function () {
    let validator = $('#form_registrar_persona').validate({
      rules: {
        txt_numero_documento: {required: true, digits: true, minlength: 8, maxlength: 8},
        txt_apellidos: {required: true, lettersonly: true, maxlength: 50},
        txt_nombres: {required: true, lettersonly: true, maxlength: 50},
        txt_edad: {required: true, digits: true, maxlength: 2},
        txt_correo: {required: true, email: true, maxlength: 50}
      },
      messages: {
        txt_numero_documento: {
          required: 'Ingresar número de documento.',
          minlength: 'Ingresar 8 dígitos.',
          maxlength: 'Ingresar 8 dígitos.',
          digits: 'Ingresar solo números.'
        },
        txt_apellidos: {
          required: 'Ingresar apellidos.',
          maxlength: 'Ingresar 50 letras como máximo.',
          lettersonly: 'Ingresar solo letras'
        },
        txt_nombres: {
          required: 'Ingresar nombres.',
          maxlength: 'Ingresar 50 letras como máximo.',
          lettersonly: 'Ingresar solo letras'
        },
        txt_edad: {
          required: 'Ingresar edad.',
          maxlength: 'Ingresar 2 dígitos como máximo',
          digits: 'Ingresar solo números'
        },
        txt_correo: {
          required: 'Ingresar correo.',
          maxlength: 'Ingresar 50 letras como máximo.',
          email: 'Ingresar un correo válido'
        }
      }
    })
    let estado = validator.form()
    if (estado) {
      persona
        .registrar()
        .then((data) => {
          if (data.status) {
            customSwal
              .alert('¡Exito!', data.message, 'success')
              .then(() => {
                $('#modal_registrar_persona').modal('hide')
              })
              .then(() => {
                persona.recargarTabla()
              })
          } else {
            customSwal.alert('¡Error!', data.message, 'error')
          }

        })
        .catch((data) => {
          customSwal.alert('¡Error!', data.message, 'error')
        })
    }
  })

  $('#btn_editar_persona').on('click', function () {
    let validator = $('#form_editar_persona').validate({
      rules: {
        txt_apellidos_editar: {required: true, lettersonly: true, maxlength: 50},
        txt_nombres_editar: {required: true, lettersonly: true, maxlength: 50},
        txt_edad_editar: {required: true, digits: true, maxlength: 2},
        txt_correo_editar: {required: true, email: true, maxlength: 50}
      },
      messages: {
        txt_apellidos_editar: {
          required: 'Ingresar apellidos.',
          maxlength: 'Ingresar 50 letras como máximo.',
          lettersonly: 'Ingresar solo letras'
        },
        txt_nombres_editar: {
          required: 'Ingresar nombres.',
          maxlength: 'Ingresar 50 letras como máximo.',
          lettersonly: 'Ingresar solo letras'
        },
        txt_edad_editar: {
          required: 'Ingresar edad.',
          maxlength: 'Ingresar 2 dígitos como máximo',
          digits: 'Ingresar solo números'
        },
        txt_correo_editar: {
          required: 'Ingresar correo.',
          maxlength: 'Ingresar 50 letras como máximo.',
          email: 'Ingresar un correo válido'
        }
      }
    })
    let estado = validator.form()
    if (estado) {
      persona
        .editar()
        .then((data) => {
          customSwal
            .alert('¡Exito!', data.message, 'success')
            .then(() => {
              $('#modal_editar_persona').modal('hide')
            })
            .then(() => {
              persona.recargarTabla()
            })
        })
        .catch((data) => {
          customSwal.alert('¡Error!', data.message, 'error')
        })
    }
  })

  $('#btn_buscar_criterio').on('click', function () {
    persona.recargarTabla()
  })

  $('#txt-busqueda').keyup(function (e) {
    if (e.keyCode === 13) {
      persona.recargarTabla()
    }
  })
}
const validateInputs = () => {
  $(document.querySelector('#txt-busqueda')).validCampo('abcdefghijklmnñopqrstuvwxyzáéíóú ')

  $(document.querySelector('#txt_numero_documento')).validCampo('1234567890')
  $(document.querySelector('#txt_apellidos')).validCampo('abcdefghijklmnñopqrstuvwxyzáéíóú ')
  $(document.querySelector('#txt_nombres')).validCampo('abcdefghijklmnñopqrstuvwxyzáéíóú ')
  $(document.querySelector('#txt_edad')).validCampo('1234567890')
  $(document.querySelector('#txt_correo')).validCampo('abcdefghijklmnñopqrstuvwxyz1234567890._-@ ')

}

jqueryValidateConfig()
persona.listar()
asignarEventos()
limpiarCajasTexto()
validateInputs()
