Source: controllers/c_setUpInscripciones.js

/**
 * @fileoverview Módulo para configurar la inscripción de alumnos en etapas y clases.
 * Muestra un modal para seleccionar etapa y clase, luego carga alumnos según la clase seleccionada.
 *
 * @author Mauricio Peña
 */

import { ModalConfirmacion } from "/InscripcionesEVG/assets/js/utils/modalConfirmacion.js";
import { Loader } from "/InscripcionesEVG/assets/js/utils/loader.js";
import M_obtenerEtapasYClases from "/InscripcionesEVG/assets/js/models/m_obtenerEtapasYClases.js";
import { ErrorDialog } from "/InscripcionesEVG/assets/js/utils/errorHandler.js";
import {
	rellenarSelectsConAlumnos,
	rellenarSelectsConSeleccionados,
} from "/InscripcionesEVG/assets/js/controllers/c_obtenerAlumnos.js";

const errorDialog = new ErrorDialog();

/**
 * Configura y muestra el modal de inscripción.
 * Carga las etapas y clases, permite seleccionar, luego carga los alumnos correspondientes.
 *
 * @async
 * @function
 * @returns {Promise<boolean|undefined>} Retorna true si la inscripción se configuró correctamente, false si faltaron campos, o undefined si hubo error.
 */
export async function setUpInscripciones() {
	const loader = new Loader("Cargando...");
	const obj = new M_obtenerEtapasYClases();

	/** @type {Array<Object>} Datos con etapas y sus clases */
	const datos = await obj.obtenerEtapasYClases();

	// Crear opciones del select de etapas
	const opcionesEtapas = datos
		.map(
			(etapa) =>
				`<option value="${etapa.idEtapa}">${etapa.nombreEtapa}</option>`,
		)
		.join("");
	loader.ocultar();

	new ModalConfirmacion({
		titulo: "Selecciona Etapa y Clase",
		contenidoPersonalizado: `
    <label>Etapa:
      <select id="select-etapa">
        <option value="">Selecciona una etapa</option>
        ${opcionesEtapas}
      </select>
    </label>
    <label>Clase:
      <select id="select-clase" disabled>
        <option value="">Selecciona una clase</option>
      </select>
    </label>
  `,
		onMostrar: () => {
			const selectEtapa = document.getElementById("select-etapa");
			const selectClase = document.getElementById("select-clase");

			// Al cambiar la etapa, actualizar select de clases
			selectEtapa.addEventListener("change", () => {
				const etapaSeleccionada = selectEtapa.value;

				selectClase.innerHTML = `<option value="">Selecciona una clase</option>`;

				if (!etapaSeleccionada) {
					selectClase.disabled = true;
					return;
				}

				const etapa = datos.find((e) => e.idEtapa == etapaSeleccionada);

				if (etapa && etapa.clases.length > 0) {
					etapa.clases.forEach((clase) => {
						const option = document.createElement("option");
						option.value = clase.idClase;
						option.textContent = clase.nombre;
						selectClase.appendChild(option);
					});
					selectClase.disabled = false;
				} else {
					selectClase.disabled = true;
				}
			});
		},
		onAceptar: async () => {
			const loader = new Loader("Cargando...");

			const etapa = document.getElementById("select-etapa").value;
			const clase = document.getElementById("select-clase").value;
			const selectClase = document.getElementById("select-clase");

			const claseTexto = selectClase.options[selectClase.selectedIndex].text;

			if (!etapa || !clase) {
				errorDialog.show("Debes seleccionar ambos campos");

				loader.ocultar();
				return false;
			}
			const form = document.getElementById("formIns");

			// Mostrar la clase seleccionada encima del formulario
			const h2 = document.createElement("h2");
			h2.style.display = "block";
			h2.innerHTML = `Clase seleccionada: <span class="claseTexto">${claseTexto}</span>`;
			form.parentNode.insertBefore(h2, form);

			console.log("ID CLASE" + clase);

			try {
				// Comprobar si hay alumnos seleccionados para la clase
				const response = await fetch(
					"/InscripcionesEVG/index.php?controlador=alumnosSeleccionados&accion=comprobar&j=1",
					{
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({ idClase: clase }),
					},
				);

				const data = await response.json();
				console.log(data);

				if (data.success) {
					await rellenarSelectsConSeleccionados(clase);
				} else {
					await rellenarSelectsConAlumnos(clase);
				}

				// Mostrar el contenido principal con los selects llenos
				document.getElementById("ContenidoPrincipal").style.display = "block";
				return true;
			} catch (error) {
				console.error(error);
			} finally {
				loader.ocultar();
			}

			// Si hay error no retorna nada
		},
		onCancelar: () => {
			// Al cancelar, redirigir a la página principal
			window.location.href = "/InscripcionesEVG/index.php";
		},
	});
}