import { mostrarMensajes } from "./funcionesGenerales.js?v=1.0.0";
import metodosFetch from "./metodosFetch.js?v=1.0.0";
import { NOMBRE_SESION } from "./constantes.js?v=1.0.0";

const construirMenu = async function () {
  try {
    let menuJSON = await obtenerJSONMenu();

    const menuHTML = await convertirMenuHTML(menuJSON);

    document
      .getElementById("li-menu-title")
      .insertAdjacentHTML("afterend", menuHTML);

    const menuColapsado = document.querySelector(".app-menu.navbar-menu");

    if (menuColapsado && menuColapsado.offsetHeight > 600) {
      document.documentElement.style.setProperty(
        "min-height",
        `${menuColapsado.offsetHeight}px`
      );
    }
    return true;
  } catch (err) {
    throw err;
  }
};

const obtenerJSONMenu = async function () {
  try {
    let idUsuario = localStorage.getItem(`${NOMBRE_SESION}-UId`),
      strMenu = localStorage.getItem(`${NOMBRE_SESION}-${idUsuario}-menu`);

    if (!strMenu) {
      let { data: datos } = await metodosFetch.get({
        archivo: "controllers/menuController",
        parametros: {
          accion: "obtenerMenu",
        },
        loader: false,
      });

      typeof datos == "object" && (datos = Object.values(datos));

      strMenu = JSON.stringify(datos);

      localStorage.setItem(
        `${NOMBRE_SESION}-${idUsuario}-menu`,
        strMenu
      );
    }

    return JSON.parse(strMenu);
  } catch (err) {
    throw err;
  }
};

const convertirMenuHTML = async function (menuJSON) {
  try {
    const arrHTML = menuJSON.map((modulo) => {
      typeof modulo.apartados == "object" &&
        (modulo.apartados = Object.values(modulo.apartados));
      let contenedor = encodeURIComponent(btoa(modulo.contenedor));
      let apartadosN1HTML = modulo.apartados.map((apartadoN1) => {
        typeof apartadoN1.subApartados == "object" &&
          (apartadoN1.subApartados = Object.values(apartadoN1.subApartados));

        let contenedorN2 = `ap${apartadoN1.id}-menu-option`,
          partesNombreArchivoN1 = apartadoN1.nombreArchivo.trim().split("."),
          paginaN1 = partesNombreArchivoN1[0]
            .replace("Page", "")
            .replace("page", ""),
          urlN1 =
            apartadoN1.tipo == "V"
              ? apartadoN1.subApartados.length > 0
                ? `#${contenedorN2}`
                : `./?page=${paginaN1}&mod=${contenedor}&aid=${encodeURIComponent(
                    btoa(apartadoN1.id)
                  )}`
              : `#`,
          selectorClaseN1 =
            apartadoN1.tipo == "M"
              ? apartadoN1.subApartados.length == 0
                ? `abrirManual`
                : ``
              : ``,
          parametrosN1 =
            apartadoN1.tipo == "V" && apartadoN1.subApartados.length > 0
              ? `data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="${contenedorN2}"`
              : apartadoN1.tipo == "M"
              ? `data-contenedor="${contenedor}" data-pagina="${paginaN1}" data-mantenimiento="${apartadoN1.mantenimiento}"`
              : ``,
          htmlN1 = `<li class="nav-item">
              <a class="nav-link menu-link ${selectorClaseN1}" href="${urlN1}" ${parametrosN1}>
                <i class="${apartadoN1.icono}"></i>
                <span>${apartadoN1.titulo}</span>
              </a>`;

        apartadoN1.tipo == "V" &&
          apartadoN1.subApartados.length > 0 &&
          (htmlN1 += `<div class="collapse menu-dropdown" id="${contenedorN2}"><ul class="nav nav-sm flex-column">`);

        let apartadosN2HTML = apartadoN1.subApartados.map((apartadoN2) => {
          typeof apartadoN2.subApartados == "object" &&
            (apartadoN2.subApartados = Object.values(apartadoN2.subApartados));

          let contenedorN3 = `ap${apartadoN2.id}-menu-option`,
            partesNombreArchivoN2 = apartadoN2.nombreArchivo.trim().split("."),
            paginaN2 = partesNombreArchivoN2[0]
              .replace("Page", "")
              .replace("page", ""),
            urlN2 =
              apartadoN2.tipo == "V"
                ? apartadoN2.subApartados.length > 0
                  ? `#${contenedorN3}`
                  : `./?page=${paginaN2}&mod=${contenedor}&aid=${encodeURIComponent(
                      btoa(apartadoN2.id)
                    )}`
                : `#`,
            selectorClaseN2 =
              apartadoN2.tipo == "M"
                ? apartadoN2.subApartados.length == 0
                  ? `abrirManual`
                  : ``
                : ``,
            parametrosN2 =
              apartadoN2.tipo == "V" && apartadoN2.subApartados.length > 0
                ? `data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="${contenedorN3}"`
                : apartadoN2.tipo == "M"
                ? `data-contenedor="${contenedor}" data-pagina="${paginaN2}" data-mantenimiento="${apartadoN2.mantenimiento}"`
                : ``,
            htmlN2 = `<li class="nav-item">
                  <a class="nav-link ${selectorClaseN2}" href="${urlN2}" ${parametrosN2}>
                    ${apartadoN2.titulo}
                  </a>`;

          apartadoN2.tipo == "V" &&
            apartadoN2.subApartados.length > 0 &&
            (htmlN2 += `<div class="collapse menu-dropdown" id="${contenedorN3}"><ul class="nav nav-sm flex-column">`);

          let apartadosN3HTML = apartadoN2.subApartados.map((apartadoN3) => {
            typeof apartadoN3.subApartados == "object" &&
              (apartadoN3.subApartados = Object.values(
                apartadoN3.subApartados
              ));

            let contenedorN4 = `ap${apartadoN3.id}-menu-option`,
              partesNombreArchivoN3 = apartadoN3.nombreArchivo
                .trim()
                .split("."),
              paginaN3 = partesNombreArchivoN3[0]
                .replace("Page", "")
                .replace("page", ""),
              urlN3 =
                apartadoN3.tipo == "V"
                  ? apartadoN3.subApartados.length > 0
                    ? `#${contenedorN4}`
                    : `./?page=${paginaN3}&mod=${contenedor}&aid=${encodeURIComponent(
                        btoa(apartadoN3.id)
                      )}`
                  : `#`,
              selectorClaseN3 =
                apartadoN3.tipo == "M"
                  ? apartadoN3.subApartados.length == 0
                    ? `abrirManual`
                    : ``
                  : ``,
              parametrosN3 =
                apartadoN3.tipo == "V" && apartadoN3.subApartados.length > 0
                  ? `data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="${contenedorN4}"`
                  : apartadoN3.tipo == "M"
                  ? `data-contenedor="${contenedor}" data-pagina="${paginaN3}" data-mantenimiento="${apartadoN3.mantenimiento}"`
                  : ``,
              htmlN3 = `<li class="nav-item">
                  <a class="nav-link ${selectorClaseN3}" href="${urlN3}" ${parametrosN3}>
                    ${apartadoN3.titulo}
                  </a>`;

            apartadoN3.tipo == "V" &&
              apartadoN3.subApartados.length > 0 &&
              (htmlN3 += `<div class="collapse menu-dropdown" id="${contenedorN4}"><ul class="nav nav-sm flex-column">`);

            let apartadosN4HTML = apartadoN3.subApartados.map((apartadoN4) => {
              let partesNombreArchivoN4 = apartadoN4.nombreArchivo
                  .trim()
                  .split("."),
                paginaN4 = partesNombreArchivoN4[0]
                  .replace("Page", "")
                  .replace("page", ""),
                urlN4 =
                  apartadoN3.tipo == "V"
                    ? `./?page=${paginaN4}&mod=${contenedor}&aid=${encodeURIComponent(
                        btoa(apartadoN4.id)
                      )}`
                    : `#`,
                selectorClaseN4 = apartadoN4.tipo == "M" ? `abrirManual` : ``,
                parametrosN4 =
                  apartadoN4.tipo == "M"
                    ? `data-contenedor="${contenedor}" data-pagina="${paginaN4}" data-mantenimiento="${apartadoN4.mantenimiento}"`
                    : ``,
                htmlN4 = `<li class="nav-item">
                      <a class="nav-link ${selectorClaseN4}" href="${urlN4}" ${parametrosN4}>
                        ${apartadoN4.titulo}
                      </a></li>`;

              return htmlN4;
            });

            apartadoN3.tipo == "V" &&
              apartadoN3.subApartados.length > 0 &&
              (htmlN3 += `${apartadosN4HTML.join("")}</ul></div>`);

            htmlN3 += `</li>`;
            return htmlN3;
          });

          apartadoN2.tipo == "V" &&
            apartadoN2.subApartados.length > 0 &&
            (htmlN2 += `${apartadosN3HTML.join("")}</ul></div>`);

          htmlN2 += `</li>`;

          return htmlN2;
        });

        apartadoN1.tipo == "V" &&
          apartadoN1.subApartados.length > 0 &&
          (htmlN1 += `${apartadosN2HTML.join("")}</ul></div>`);

        htmlN1 += `</li>`;

        return htmlN1;
      });
      return `<li class="menu-title"><span>${
        modulo.titulo
      }</span></li>${apartadosN1HTML.join("")}`;
    });

    return arrHTML.join("");
  } catch (err) {
    throw err;
  }
};

export default construirMenu;
