//fetch de las listas regionales
fetch(
  "https://especiales.larepublica.pe/lista-de-candidatos-elecciones-regionales-2022-quienes-son-y-cuales-son-sus-propuestas-de-los-proximos-gobernadores/listas-regional.json"
)
  .then((response) => response.json())
  .then((res) => {
    const { data } = res;

    //Crear los options para el select de regiones
    const selectRegions = document.getElementById("selectRegions");
    const regiones = data.map((item) => item.txRegion);

    const regionesUnicas = [...new Set(regiones)].sort();

    regionesUnicas.forEach((region) => {
      const option = document.createElement("option");
      option.value = region;
      option.text = region;
      selectRegions.appendChild(option);
    });

    selectRegions.onchange = function () {
      setOrganizations();
      candidate__container.style.display = "none";
    };

    //Crear los options para el select de partidos
    const selectOrganizations = document.getElementById("selectOrganizations");

    const setOrganizations = () => {
      const regionSelected = selectRegions.value;

      const organizaciones = data
        .filter((item) => item.txRegion === regionSelected)
        .map((item) => item.txOrganizacionPolitica);

      const organizacionesUnicas = [...new Set(organizaciones)].sort();

      selectOrganizations.innerHTML = `<option value="0">Selecciona una organización</option>`;

      organizacionesUnicas.forEach((organizacion) => {
        const option = document.createElement("option");
        option.value = organizacion;
        option.text = organizacion;
        selectOrganizations.appendChild(option);
      });
    };

    // Hacer que el contenedor de candidato se muestre si candidate__container existe

    let candidate__container = null;
    selectOrganizations.onchange = function () {
      const interval = setInterval(() => {
        if (candidate__container) {
          candidate__container.scrollIntoView({
            behavior: "smooth",
          });
          clearInterval(interval);
        } else {
          candidate__container = document.getElementById(
            "candidate__container"
          );
        }
      }, 500);
      getTxCodExpedienteExt();
      getTxRutaCompleto();
    };

    //Recuperar plan de gobierno
    const getTxRutaCompleto = () => {
      const regionSelected = selectRegions.value;
      const organizacionSelected = selectOrganizations.value;
      const plan = data
        .filter(
          (item) =>
            item.txRegion === regionSelected &&
            item.txOrganizacionPolitica === organizacionSelected
        )
        .map((item) => item.txRutaCompleto);

      const planSiteHTML = document.getElementById("plan__site");
      planSiteHTML.innerHTML = `<div>
        <a href="${plan}" target="_blank">Ver plan de gobierno</a>
      </div>`;
    };

    //Recuperar el txCodExpedienteExt
    const getTxCodExpedienteExt = () => {
      const regionSelected = selectRegions.value;
      const organizacionSelected = selectOrganizations.value;

      const txCodExpedienteExt = data
        .filter(
          (item) =>
            item.txRegion === regionSelected &&
            item.txOrganizacionPolitica === organizacionSelected
        )
        .map((item) => item.txCodExpedienteExt);

      organizacionSelected && getSelectedList(txCodExpedienteExt[0]);
    };
  })
  .catch((err) => {
    console.log(err);
  });

/* fetch a la lista seleccionada y pintado de data */
const getSelectedList = (txCodExpedienteExt) => {
  fetch(
    `https://apiplataformaelectoral3.jne.gob.pe/api/v1/plan-gobierno/candidatos?IdProcesoElectoral=113&TxCodExpedienteExt=${txCodExpedienteExt}`
  )
    .then((response) => response.json())
    .then((res) => {
      const { data } = res;

      const candidate__container = document.getElementById(
        "candidate__container"
      );

      candidate__container.style.display = "block";

      const {
        cargo,
        feNacimiento,
        idHojaVida,
        nombreCompleto,
        numeroDocumento,
        organizacionPolitica,
        postulaDepartamento,
        rutaArchivo,
      } = data[0];

      const nombreCompletoHTML = document.getElementById("nombreCompleto");
      const numeroDocumentoHTML = document.getElementById("numeroDocumento");
      const cargoHTML = document.getElementById("cargo");
      const organizacionPoliticaHTML = document.getElementById(
        "organizacionPolitica"
      );
      const postulaDepartamentoHTML = document.getElementById(
        "postulaDepartamento"
      );
      const rutaArchivoHTML = document.getElementById("rutaArchivo");
      const feNacimientoHTML = document.getElementById("feNacimiento");

      restartTables();

      nombreCompletoHTML.innerHTML = nombreCompleto;
      numeroDocumentoHTML.innerHTML = `DNI: ${numeroDocumento}`;
      cargoHTML.innerHTML = cargo[0];
      organizacionPoliticaHTML.innerHTML = organizacionPolitica;
      postulaDepartamentoHTML.innerHTML = postulaDepartamento;
      rutaArchivoHTML.innerHTML = `<img src="https://declara.jne.gob.pe${rutaArchivo}" alt="candidato" />`;
      feNacimientoHTML.innerHTML = `${getEdad(feNacimiento)} años`;

      /* pintar lista que acompaña al candidato */
      const listaHTML = document.getElementById("lista");

      const listaContent = data
        .filter((item) => item.idHojaVida != idHojaVida)
        .map((item) => {
          return `
            <div class="list__row">
                <img src="https://declara.jne.gob.pe${
                  item.rutaArchivo
                }" class="list-image-dsk" alt="candidato" />
                <div class="top-container-list-element">
                  <img src="https://declara.jne.gob.pe${
                    item.rutaArchivo
                  }" class="list-image-mob" alt="candidato" />
                  <div class="container-list-element">
                    <h3>${item.nombreCompleto}</h3>
                    <p>DNI: ${item.numeroDocumento}</p>
                  </div>
                </div>
                <div>
                  <h3>Cargo al que postula</h3>
                  <p>${item.cargo[0]}</p>
                </div>
                <div>
                  <h3>Fecha de nacimiento</h3>
                  <p>${item.feNacimiento.substring(0, 10)}</p>
                </div>
            </div>
          `;
        });

      listaHTML.innerHTML = listaContent.join("");

      /* fetch de la hoja de vida */
      getHojaVida(idHojaVida);

      /* investigaciones por corrupción */
      getInvesCor(nombreCompleto);
    });
};

const restartTables = () => {
  const educacionSuperiorHTML = document.getElementById("educacionSuperior");
  const cargoPartidarioHTML = document.getElementById("cargoPartidario");
  const cargoEleccionHTML = document.getElementById("cargoEleccion");
  const sentenciaPenalHTML = document.getElementById("sentenciaPenal");
  const investigacionesHTML = document.getElementById("invesCor");

  educacionSuperiorHTML.innerHTML = "<p>Cargando...</p>";
  cargoPartidarioHTML.innerHTML = "<p>Cargando...</p>";
  cargoEleccionHTML.innerHTML = "<p>Cargando...</p>";
  sentenciaPenalHTML.innerHTML = "<p>Cargando...</p>";
  investigacionesHTML.innerHTML = "<p>Cargando...</p>";
};

const getHojaVida = (idHojaVida) => {
  fetch(
    `https://apiplataformaelectoral8.jne.gob.pe/api/v1/candidato/hoja-vida?IdHojaVida=${idHojaVida}`
  )
    .then((response) => response.json())
    .then((res) => {
      const { formacionAcademica, trayectoria, sentenciaPenal } = res;

      /* pintar la data de formación académica */
      const {
        educacionTecnico,
        educacionNoUniversitaria,
        educacionUniversitaria,
        educacionPosgrado,
        educacionPosgradoOtro,
      } = formacionAcademica;

      const educacionSuperiorHTML =
        document.getElementById("educacionSuperior");

      const educacionTecnicoHTML = educacionTecnico.map((item) => {
        return `
        <div class="row table--elem">
            <p class="topic__content">${item.cenEstudioTecnico}</p>
            <p class="topic__content">${item.carreraTecnico}</p>
        </div>
        `;
      });

      const educacionUniversitariaHTML = educacionUniversitaria.map((item) => {
        return `
        <div class="row table--elem">
            <p class="topic__content">${item.universidad}</p>
            <p class="topic__content">${item.carreraUni}</p>
            <p class="topic__content">${item.concluidoEduUni}</p>
            <p class="topic__content">${item.egresadoEduUni}</p>
        </div>
        `;
      });

      const educacionPosgradoHTML = educacionPosgrado.map((item) => {
        return `
        <div class="row table--elem">
            <p class="topic__content">${item.txCenEstudioPosgrado}</p>
            <p class="topic__content">${item.txEspecialidadPosgrado}</p>
            <p class="topic__content">${item.concluidoPosgrado}</p>
            <p class="topic__content">${
              item.egresadoPosgrado == null ? "NO" : item.egresadoPosgrado
            }</p>
        </div>
        `;
      });

      educacionSuperiorHTML.innerHTML = "";

      educacionTecnicoHTML.length &&
        (educacionSuperiorHTML.innerHTML += `
          <div class="table__box">
            <p class="topic__subtitle">Educación Técnica</p>
            <div class="row table--elem">
              <p class="topic__content">CENTRO DE ESTUDIOS</p>
              <p class="topic__content">CARRERA</p>
            </div>
            ${educacionTecnicoHTML.join("")}
          </div>`);

      educacionUniversitariaHTML.length &&
        (educacionSuperiorHTML.innerHTML += `
          <div class="table__box">
            <p class="topic__subtitle">Educación Universitaria</p>
            <div class="row table--elem">
              <p class="topic__content">CENTRO DE ESTUDIOS</p>
              <p class="topic__content">CARRERA</p>
              <p class="topic__content">CONCLUIDOS</p>
              <p class="topic__content">EGRESADOS</p>
            </div>
            ${educacionUniversitariaHTML.join("")}
          </div> `);

      educacionPosgradoHTML.length &&
        (educacionSuperiorHTML.innerHTML += `
          <div class="table__box">
            <p class="topic__subtitle">Posgrado</p>
            <div class="row table--elem">
              <p class="topic__content">CENTRO DE ESTUDIOS</p>
              <p class="topic__content">ESPECIALIDAD</p>
              <p class="topic__content">CONCLUIDOS</p>
              <p class="topic__content">EGRESADOS</p>
            </div>
            ${educacionPosgradoHTML.join("")}
          </div> `);

      educacionTecnicoHTML.length === 0 &&
        educacionUniversitariaHTML.length === 0 &&
        educacionPosgradoHTML.length === 0 &&
        (educacionSuperiorHTML.innerHTML += `<p class="topic__content">No registra</p>`);

      /* pintar la data del trayectoria */
      const { cargoEleccion, cargoPartidario } = trayectoria;

      const cargoEleccionHTML = document.getElementById("cargoEleccion");
      const cargoPartidarioHTML = document.getElementById("cargoPartidario");

      const cargoEleccionContent = cargoEleccion.map((item) => {
        return `
          <div class="row table--elem">
              <p class="topic__content">${item.cargoEleccion}</p>
              <p class="topic__content">${item.orgPolCargoElec}</p>
              <p class="topic__content">${item.anioCargoElecDesde}</p>
              <p class="topic__content">${item.anioCargoElecHasta}</p>
          </div>
        `;
      });

      const cargoPartidarioContent = cargoPartidario.map((item) => {
        return `
          <div class="row table--elem">
              <p class="topic__content">${item.cargoPartidario}</p>
              <p class="topic__content">${item.orgPolCargoPartidario}</p>
              <p class="topic__content">${item.anioCargoPartiDesde}</p>
              <p class="topic__content">${item.anioCargoPartiHasta}</p>
          </div>
        `;
      });

      cargoEleccionContent.length
        ? (cargoEleccionHTML.innerHTML = `
          <div class="row table--elem">
            <p class="topic__content">CARGO</p>
            <p class="topic__content">ORGANIZACIÓN</p>
            <p class="topic__content">DESDE</p>
            <p class="topic__content">HASTA</p>
          </div>
          ${cargoEleccionContent.join("")}`)
        : (cargoEleccionHTML.innerHTML = `<p class="topic__content">No registra</p>`);

      cargoPartidarioContent.length
        ? (cargoPartidarioHTML.innerHTML = `
          <div class="row table--elem">
            <p class="topic__content">CARGO</p>
            <p class="topic__content">ORGANIZACIÓN</p>
            <p class="topic__content">DESDE</p>
            <p class="topic__content">HASTA</p>
          </div>
          ${cargoPartidarioContent.join("")}`)
        : (cargoPartidarioHTML.innerHTML = `<p class="topic__content">No registra</p>`);

      /* pintar data de las sentencias */
      const sentenciaPenalHTML = document.getElementById("sentenciaPenal");

      const sentenciaPenalContent = sentenciaPenal.map((item) => {
        return `
          <div class="row table--elem">
              <p class="topic__content">${item.txDelitoPenal}</p>
              <p class="topic__content">${item.feSentenciaPenal}</p>
              <p class="topic__content">${item.txOrganoJudiPenal}</p>
          </div>
        `;
      });

      sentenciaPenalContent.length
        ? (sentenciaPenalHTML.innerHTML = `
          <div class="table__box">
            <div class="row table--elem">
              <p class="topic__content">DELITO</p>
              <p class="topic__content">FECHA</p>
              <p class="topic__content">ÓRGANO JUDICIAL</p>
            </div>
            ${sentenciaPenalContent.join("")}
          </div>`)
        : (sentenciaPenalHTML.innerHTML = `<p class="topic__content">No registra</p>`);
    });
};

/* pintar data de las investigaciones por corrupción */

const getInvesCor = (name) => {
  let parseName = "";
  let nameElements = name.split(" ");

  fetch(
    "https://especiales.larepublica.pe/lista-de-candidatos-elecciones-regionales-2022-quienes-son-y-cuales-son-sus-propuestas-de-los-proximos-gobernadores/delitos.json"
  )
    .then((response) => response.json())
    .then((data) => {
      if (nameElements.length === 3) {
        parseName = `${nameElements[1]} ${nameElements[2]} ${nameElements[0]}`;
      } else if (nameElements.length === 4) {
        parseName = `${nameElements[2]} ${nameElements[3]} ${nameElements[0]} ${nameElements[1]}`;
      }

      const investigacionesHTML = document.getElementById("invesCor");

      const investigaciones = data
        .filter((item) => item.INCULPADO === parseName)
        .map((item) => {
          return `
          <div class="row row__xl table--elem">
              <p class="topic__content">${item.DELITO_PRINCIPAL}</p>
              <p class="topic__content">${item.AGRAVIADO_PRINCIPAL}</p>
              <p class="topic__content">${item.ETAPA_PROCESAL}</p>
              <p class="topic__content">${item.CARP_EXP}</p>
              <p class="topic__content">${item.FISCALIA_JUZGADO_SALA}</p>
          </div>
        `;
        });

      investigaciones.length
        ? (investigacionesHTML.innerHTML = `
          <div class="table__box">
            <div class="row row__xl table--elem">
              <p class="topic__content">DELITO</p>
              <p class="topic__content">AGRAVIADO</p>
              <p class="topic__content">ETAPA PROCESAL</p>
              <p class="topic__content">EXPEDIENTE</p>
              <p class="topic__content">FISCALIA</p>
            </div>
            ${investigaciones.join("")}
          </div>`)
        : (investigacionesHTML.innerHTML = `<p class="topic__content">No registra</p>`);
    });
};

const getEdad = (dateString) => {
  let hoy = new Date();
  let fechaNacimiento = new Date(dateString);
  let edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
  let diferenciaMeses = hoy.getMonth() - fechaNacimiento.getMonth();
  if (
    diferenciaMeses < 0 ||
    (diferenciaMeses === 0 && hoy.getDate() < fechaNacimiento.getDate())
  ) {
    edad--;
  }
  return edad;
};