"use strict";

import CustomDataTable from "../app/CustomDataTable.js?v=1.0.0";
import iconosFontAwesome from "../app/iconos.js?v=1.0.0";
import {
  obtenerHTMLBotonesDropdown,
  mostrarMensajes,
  mostrarToastify,
} from "../app/funcionesGenerales.js?v=1.0.0";
import metodosFormularios from "../app/metodosFormularios.js?v=1.0.0";
import Modulo from "../models/moduloModel.js?v=1.0.0";
import Apartado from "../models/apartadoModel.js?v=1.0.0";

!(function () {
  document
    .getElementById("btn-agregar-modulo")
    .addEventListener("click", () => {
      configModulo.editar();
    });

  document
    .getElementById("btn-cancelar-modulo")
    .addEventListener("click", () => {
      configModulo.cancelar();
    });

  document
    .getElementById("btn-crear-apartado")
    .addEventListener("click", () => {
      configApartado.editar();
    });

  document
    .getElementById("btn-regresar-apartado")
    .addEventListener("click", () => {
      configApartado.regresar();
    });

  document.getElementById("modulo-form").addEventListener("submit", (e) => {
    e.preventDefault();
    configModulo.guardar();
  });

  document.getElementById("apartado-form").addEventListener("submit", (e) => {
    e.preventDefault();
    configApartado.guardar();
  });

  document
    .getElementById("txt-buscador-icono")
    .addEventListener("keyup", (e) => {
      mostrarIconos({ claseBusqueda: e.target.value });
    });

  document.addEventListener("click", (e) => {
    let target = e.target;

    if (target.classList.contains("icon-selector")) {
      let icon = target.className.replace("icon-selector ", "");

      configApartado.configurarIcono({ clase: icon });
    }

    if (target.classList.contains("configurar-sub-apartados")) {
      configApartado.configurarSub(target.dataset.id);
    }

    if (target.classList.contains("mantenimiento-apartado")) {
      configApartado.setMantenimiento({ id: target.dataset.id, link: target });
    }

    if (target.classList.contains("eliminar-apartado")) {
      configApartado.eliminar(target.dataset.id);
    }

    if (target.classList.contains("editar-apartado")) {
      configApartado.editar(target.dataset.id);
    }

    if (target.classList.contains("mantenimiento-modulo")) {
      configModulo.setMantenimiento({ id: target.dataset.id, link: target });
    }

    if (target.classList.contains("editar-modulo")) {
      configModulo.editar(target.dataset.id);
    }

    if (target.classList.contains("eliminar-modulo")) {
      configModulo.eliminar(target.dataset.id);
    }
  });
})();

window.onload = () => {
  inicializarTablas()
    .then(() => configModulo.inicializar())
    .then(() => {
      document.querySelector(".loader") &&
        document.querySelector(".loader").classList.add("d-none");
    })
    .catch(mostrarMensajes.error);
};

function inicializarTablas() {
  return new Promise((resolve, reject) => {
    try {
      configModulo.tabla = new CustomDataTable({
        id: "modulos-tbl",
        alineadoIzquierda: [1, 2],
        noOrdenable: [4],
      });

      configApartado.tabla = new CustomDataTable({
        id: "apartados-tbl",
        alineadoIzquierda: [3, 4],
        noOrdenable: [7],
      });
      resolve();
    } catch (err) {
      reject(err);
    }
  });
}

const configModulo = {
  id: 0,
  cnt: 0,
  data: {},
  tabs: {
    modulos: document.getElementById("modulos-tab"),
    edicion: document.getElementById("editar-modulo-tab"),
  },
  botones: {
    nuevo: document.getElementById("btns-nuevo-modulo"),
    guardar: document.getElementById("btns-guardar-modulo"),
  },
  tabla: null,
  campos: {
    titulo: document.getElementById("txt-titulo-modulo"),
    contenedor: document.getElementById("txt-contenedor-modulo"),
    descripcion: document.getElementById("txt-descripcion-modulo"),
  },
  inicializar: function () {
    return new Promise(async (resolve, reject) => {
      try {
        const { data: modulos = [] } = await Modulo.obtenerTodos();

        modulos.forEach((m) => {
          m = { ...m, apartados: {} };

          this.cnt++;
          const fila = this.prepararParaFila({
            datos: m,
            id: this.cnt,
          });

          this.tabla.agregarFila({
            datos: fila,
            idFila: `trModulo${this.cnt}`,
          });

          this.data[this.cnt] = { ...m };
        });

        this.tabla.redibujar();

        resolve();
      } catch (err) {
        reject(err);
      }
    });
  },
  editar: async function (id = 0) {
    await metodosFormularios.limpiar({ id: "modulo-form" });

    this.id = id;

    let apartados = {};
    try {
      if (this.id > 0) {
        let respuesta = await Apartado.obtenerPorModulo({ idModulo: this.data[this.id]?.id || 0, });

        let posicionN1 = 1;

        respuesta.data.forEach((apartadoN1) => {
          let apartadosN2 = {},
            posicionN2 = 1;

          apartadoN1.subApartados.forEach((apartadoN2) => {
            let apartadosN3 = {},
              posicionN3 = 1;

            apartadoN2.subApartados.forEach((apartadoN3) => {
              let apartadosN4 = {},
                posicionN4 = 1;

              apartadoN3.subApartados.forEach((apartadoN4) => {
                apartadosN4[posicionN4] = {
                  ...apartadoN4,
                  subApartados: {},
                };
                posicionN4++;
              });

              apartadosN3[posicionN3] = {
                ...apartadoN3,
                subApartados: apartadosN4,
              };
            });

            apartadosN2[posicionN2] = {
              ...apartadoN2,
              subApartados: apartadosN3,
            };
            posicionN2++;
          });

          apartados[posicionN1] = { ...apartadoN1, subApartados: apartadosN2 };
          posicionN1++;
        });

        const modulo = this.data[this.id];

        this.campos.titulo.value = modulo.titulo;
        this.campos.contenedor.value = modulo.contenedor;
        this.campos.descripcion.value = modulo.descripcion;
      }

      await configApartado.configurar({ apartados });

      Object.values(this.tabs).forEach((tab) =>
        tab.classList.toggle("disabled")
      );
      Object.values(this.botones).forEach((btn) =>
        btn.classList.toggle("d-none")
      );

      this.tabs.edicion.click();
    } catch (err) {
      mostrarMensajes.error(err);
    }

    // metodosFormularios
    //   .limpiar({ id: "modulo-form" })
    //   .then(() => {
    //     this.id = id;

    //     let configurando = new Promise((resolve, reject) => {
    //       if (this.id > 0) {
    //         let tmp = this.data[this.id];
    //         this.campos.titulo.value = tmp.titulo;
    //         this.campos.contenedor.value = tmp.contenedor;
    //         this.campos.descripcion.value = tmp.descripcion;
    //         Apartado.obtenerPorModulo({ idModulo: tmp.id })
    //           .then((response) => {
    //             let apartados = {},
    //               posicionL1 = 1;
    //             response.data.forEach((nivel1) => {
    //               let apartadosL2 = {},
    //                 posicionL2 = 1;
    //               nivel1.apartados.forEach((nivel2) => {
    //                 let apartadosL3 = {},
    //                   posicionL3 = 1;

    //                 nivel2.apartados.forEach((nivel3) => {
    //                   let apartadosL4 = {},
    //                     posicionL4 = 1;

    //                   nivel3.apartados.forEach((nivel4) => {
    //                     apartadosL4[posicionL4] = {
    //                       ...nivel4,
    //                       apartados: {},
    //                     };
    //                     posicionL4++;
    //                   });

    //                   apartadosL3[posicionL3] = {
    //                     ...nivel3,
    //                     apartados: apartadosL4,
    //                   };
    //                   posicionL3++;
    //                 });

    //                 apartadosL2[posicionL2] = {
    //                   ...nivel2,
    //                   apartados: apartadosL3,
    //                 };
    //                 posicionL2++;
    //               });
    //               apartados[posicionL1] = {
    //                 ...nivel1,
    //                 apartados: apartadosL2,
    //               };
    //               posicionL1++;
    //             });
    //             resolve(apartados);
    //           })
    //           .catch(reject);
    //       } else {
    //         resolve();
    //       }
    //     });

    //     configurando
    //       .then((apartados = {}) => {
    //         this.tabs.edicion.classList.remove("disabled");
    //         this.tabs.edicion.click();
    //         this.tabs.modulos.classList.add("disabled");
    //         this.botones.nuevo.classList.add("d-none");
    //         this.botones.guardar.classList.remove("d-none");
    //         configApartado.inicializar(apartados);
    //       })
    //       .catch(showMessages.error);
    //   })
    //   .catch(showMessages.error);
  },
  guardar: async function () {
    if (!metodosFormularios.validar({ id: "modulo-form" })) return;

    let apartados = configApartado.obtenerDatos();

    if (apartados.length == 0) {
      mostrarMensajes.warning({
        message: "Debe ingresar al menos un apartado",
      });
      return;
    }

    let modulo = new Modulo({
      id: this.id > 0 ? this.data[this.id].id : 0,
      titulo: this.campos.titulo.value.trim(),
      contenedor: this.campos.contenedor.value.trim(),
      descripcion: this.campos.descripcion.value.trim(),
      mantenimiento: this.id > 0 ? this.data[this.id].mantenimiento : 0,
      apartados,
    });

    try {
      const respuesta = await modulo.guardar();

      switch (respuesta.message) {
        case "success":
          modulo.id = respuesta.data.id;
          this.id == 0 && (modulo.fechaRegistro = respuesta.data.fechaRegistro);

          let fila = this.prepararParaFila({
            datos: modulo,
            id: this.id > 0 ? this.id : this.cnt + 1,
          });

          if (this.id == 0) {
            this.cnt++;
            this.id = this.cnt;
            this.tabla
              .agregarFila({ datos: fila, idFila: `trModulo${this.id}` })
              .redibujar();
          } else {
            this.tabla
              .actualizarFila({ datos: fila, idFila: `trModulo${this.id}` })
              .redibujar();
          }
          this.data[this.id] = { ...modulo };

          mostrarToastify({
            type: "success",
            message: `Información guardada con éxito`,
          });

          this.cancelar();
          break;
        case "duplicado":
          mostrarMensajes.warning({
            message: "Ya existe un módulo con el mismo título",
          });
          break;
        default:
          showMessages.error(respuesta);
          break;
      }
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  cancelar: function () {
    Object.values(this.tabs).forEach((tab) => tab.classList.toggle("disabled"));
    Object.values(this.botones).forEach((btn) =>
      btn.classList.toggle("d-none")
    );
    this.tabs.modulos.click();
    document.getElementById("btn-regresar-apartado").classList.add("d-none");
  },
  prepararParaFila: function ({ datos, id }) {
    let icono =
      datos.mantenimiento == 0
        ? `<i class="fas fa-flag text-success"></i>`
        : `<i class="fas fa-tools text-warning"></i>`;
    return {
      0: `${id} ${icono}`,
      1: datos.titulo,
      2: datos.descripcion,
      3: datos.contenedor,
      4: obtenerHTMLBotonesDropdown([
        {
          tipo: "custom",
          selectorClase: "mantenimiento-modulo",
          selectorId: id,
          icono:
            datos.mantenimiento == 0
              ? "fas fa-tools text-warning"
              : "fas fa-flag text-success",
          texto:
            datos.mantenimiento == 0
              ? "Iniciar mantenimiento"
              : "Terminar mantenimiento",
        },
        {
          tipo: "edit",
          selectorClase: "editar-modulo",
          selectorId: id,
          texto: "Editar",
        },
        {
          tipo: "delete",
          selectorClase: "eliminar-modulo",
          selectorId: id,
          texto: "Eliminar",
        },
      ]),
    };
  },
  setMantenimiento: async function ({ id = 0, link }) {
    let tmp = this.data[id];
    tmp.mantenimiento ??= 0;

    let mantenimiento = tmp.mantenimiento == 0 ? 1 : 0,
      iconoMostrado =
        mantenimiento == 0
          ? `<i class="fas fa-flag text-success"></i>`
          : `<i class="fas fa-tools text-warning"></i>`,
      iconoEnlace =
        mantenimiento == 0
          ? `<i class="fas fa-tools text-warning"></i>`
          : `<i class="fas fa-flag text-success"></i>`,
      modulo = new Modulo({
        id: tmp.id,
        mantenimiento,
      });

    try {
      const respuesta = await modulo.configurarMantenimiento();

      switch (respuesta.message) {
        case "success":
          this.tabla.actualizarFila({
            datos: {
              0: `${id} ${iconoMostrado}`,
            },
            idFila: `trModulo${id}`,
          });

          link.innerHTML = `${iconoEnlace} ${
            mantenimiento == 0
              ? "Iniciar mantenimiento"
              : "Terminar mantenimiento"
          }`;

          this.data[id].mantenimiento = mantenimiento;
          break;
        default:
          mostrarMensajes.error(respuesta);
          break;
      }
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  eliminar: async function (id = 0) {
    let modulo = this.data[id];

    try {
      const confirmacion = await mostrarMensajes.confirm({
        message: `Se eliminará el módulo <strong>${modulo.titulo}</strong> <br /> Esta acción no se puede deshacer`,
      });

      if (!confirmacion) return;

      const respuesta = await Modulo.eliminar({ id: modulo.id });

      switch (respuesta.message) {
        case "success":
          delete this.data[id];
          this.tabla.eliminarFila({ idFila: `trModulo${id}` }).redibujar();
          mostrarToastify({
            type: "success",
            message: `El módulo fue eliminado exitosamente`,
          });
          break;
        default:
          mostrarMensajes.error(respuesta);
          break;
      }
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
};

const configApartado = {
  id: 0,
  cnt: 0,
  data: {},
  tabla: null,
  level: 1,
  prev: [],
  modal: {
    id: "apartado-mdl",
    mostrar: () => $(`#${configApartado.modal.id}`).modal("show"),
    ocultar: () => $(`#${configApartado.modal.id}`).modal("hide"),
  },
  campos: {
    spnTitulo: document.getElementById("spn-title-apartados"),
    icono: document.getElementById("icono-apartado"),
    titulo: document.getElementById("txt-titulo-apartado"),
    tipo: document.getElementById("cbo-tipo-apartado"),
    nombreArchivo: document.getElementById("txt-archivo-apartado"),
    descripcion: document.getElementById("txt-descripcion-apartado"),
  },
  configurar: function ({ apartados = {} }) {
    return new Promise(async (resolve) => {
      try {
        await this.limpiar({ nivel: 1, idActual: 1 });

        this.prev = [];
        this.level = 1;
        this.data = JSON.parse(JSON.stringify(apartados));

        for (let key in this.data) {
          this.cnt++;

          const fila = this.prepararParaFila({
            datos: this.data[key],
            id: this.cnt,
          });

          this.tabla.agregarFila({
            datos: fila,
            idFila: `trApartado${this.cnt}`,
          });
        }

        // apartados.forEach((apartado) => {
        //   this.cnt++;
        //   this.data[this.cnt] = JSON.parse(JSON.stringify(apartado));

        //   const fila = this.prepararParaFila({
        //     datos: apartado,
        //     id: this.cnt,
        //   });

        //   this.tabla.agregarFila({
        //     datos: fila,
        //     idFila: `trApartado${this.cnt}`,
        //   });
        // });

        this.tabla.redibujar();

        resolve();
      } catch (err) {
        throw err;
      }
    });
  },
  editar: async function (id = 0) {
    try {
      await metodosFormularios.limpiar({ id: "apartado-form" });

      this.id = id;
      this.campos.icono.parentNode.disabled = this.level == 1 ? false : true;
      this.campos.icono.className = this.level == 1 ? "" : "fas fa-circle";
      this.campos.tipo.disabled = false;

      if (this.id > 0) {
        let tmp =
          this.level == 1
            ? this.data[this.id]
            : this.level == 2
            ? this.data[this.prev[1]].subApartados[this.id]
            : this.level == 3
            ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[this.id]
            : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                this.prev[3]
              ].subApartados[this.id];
        this.campos.icono.className = tmp.icono;
        this.campos.titulo.value = tmp.titulo;
        this.campos.tipo.value = tmp.tipo;
        this.campos.nombreArchivo.value = tmp.nombreArchivo;
        this.campos.descripcion.value = tmp.descripcion;
        this.campos.tipo.disabled = true;
      }

      this.modal.mostrar();
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  configurarIcono({ clase = "" }) {
    this.campos.icono.className = clase;
  },
  guardar: function () {
    if (!metodosFormularios.validar({ id: "apartado-form" })) return;

    if (this.campos.icono.className == "") {
      mostrarToastify({
        type: "warning",
        message: "Debe asignar un icono",
      });
      return;
    }

    const subApartados =
      this.id == 0
        ? {}
        : this.level == 1
        ? this.data[this.id].subApartados
        : this.level == 2
        ? this.data[this.prev[1]].subApartados[this.id].subApartados
        : this.level == 3
        ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
            this.id
          ].subApartados
        : {};

    let apartado = new Apartado({
      id:
        this.id > 0
          ? this.level == 1
            ? this.data[this.id].id
            : this.level == 2
            ? this.data[this.prev[1]].subApartados[this.id].id
            : this.level == 3
            ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                this.id
              ].id
            : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                this.prev[3]
              ].subApartados[this.id].id
          : 0,
      icono: this.campos.icono.className,
      titulo: this.campos.titulo.value,
      tipo: this.campos.tipo.value,
      nombreArchivo: this.campos.nombreArchivo.value,
      descripcion: this.campos.descripcion.value,
      nivel: this.level,
      mantenimiento:
        this.id > 0
          ? this.level == 1
            ? this.data[this.id].mantenimiento
            : this.level == 2
            ? this.data[this.prev[1]].subApartados[this.id].mantenimiento
            : this.level == 3
            ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                this.id
              ].mantenimiento
            : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                this.prev[3]
              ].subApartados[this.id].mantenimiento
          : 0,
      subApartados,
    });

    let fila = this.prepararParaFila({
      datos: apartado,
      id: this.id > 0 ? this.id : this.cnt + 1,
    });

    if (this.id == 0) {
      this.cnt++;
      this.id = this.cnt;
      this.tabla
        .agregarFila({ datos: fila, idFila: `trApartado${this.id}` })
        .redibujar();
    } else {
      this.tabla
        .actualizarFila({ datos: fila, idFila: `trApartado${this.id}` })
        .redibujar();
    }

    if (this.level == 1) {
      this.data[this.id] = JSON.parse(JSON.stringify(apartado));
    } else {
      switch (this.level) {
        case 2:
          this.data[this.prev[1]].subApartados[this.id] = JSON.parse(
            JSON.stringify(apartado)
          );
          break;
        case 3:
          this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
            this.id
          ] = JSON.parse(JSON.stringify(apartado));
          break;
        default:
          this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
            this.prev[3]
          ].subApartados[this.id] = JSON.parse(JSON.stringify(apartado));
          break;
      }
    }

    this.modal.ocultar();

    mostrarToastify({
      type: "success",
      message: "Apartado guardado correctamente",
    });
  },
  prepararParaFila: function ({ datos, id }) {
    let jsonBotones = [
      {
        tipo: "edit",
        selectorClase: "editar-apartado",
        selectorId: id,
        texto: "Editar",
      },
      {
        tipo: "delete",
        selectorClase: "eliminar-apartado",
        selectorId: id,
        texto: "Eliminar",
      },
    ];

    datos.mantenimiento == 0
      ? jsonBotones.unshift({
          tipo: "custom",
          icono: "fas fa-tools text-warning",
          texto: "Iniciar mantenimiento",
          selectorClase: "mantenimiento-apartado",
          selectorId: id,
        })
      : jsonBotones.unshift({
          tipo: "custom",
          icono: "fas fa-flag text-success",
          texto: "Terminar mantenimiento",
          selectorClase: "mantenimiento-apartado",
          selectorId: id,
        });

    datos.tipo == "V" &&
      datos.nivel < 4 &&
      jsonBotones.unshift({
        tipo: "config",
        selectorClase: "configurar-sub-apartados",
        selectorId: id,
        texto: "Configurar sub apartados",
      });

    let botones = obtenerHTMLBotonesDropdown(jsonBotones),
      iconoEstado =
        datos.mantenimiento == 0
          ? `<i class="fas fa-flag text-success"></i>`
          : `<i class="fas fa-tools text-warning"></i>`;

    return {
      0: `${id} ${iconoEstado}`,
      1: `<i class="${datos.icono}"></i>`,
      2: datos.tipo == "V" ? "Vista" : "Manual",
      3: datos.titulo,
      4: datos.descripcion,
      5: datos.nombreArchivo,
      6: Object.values(datos.subApartados).length,
      7: botones,
    };
  },
  limpiar: function ({ nivel, idActual, sentido = "forward" }) {
    return new Promise(async (resolve, reject) => {
      try {
        let nivelAnterior = sentido == "forward" ? nivel - 1 : nivel;
        if (nivelAnterior == 1) {
          this.prev[1] = idActual;
        } else {
          this.prev[nivelAnterior] = idActual;
        }

        this.cnt = 0;
        this.id = 0;
        this.level = nivel;

        this.tabla.limpiar().redibujar();
        resolve();
      } catch (err) {
        reject(err.message);
      }
    });
  },
  configurarSub: async function (id = 0) {
    try {
      this.level++;
      let nivel = this.level;
      await this.limpiar({ nivel, idActual: id });

      document.getElementById("btn-regresar-apartado").classList.add("d-none");

      let nivelAnterior = nivel - 1,
        subApartados =
          nivelAnterior == 1
            ? this.data[id].subApartados
            : nivelAnterior == 2
            ? this.data[this.prev[1]].subApartados[id].subApartados
            : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
                id
              ].subApartados,
        arrUbicacion = [`${this.data[this.prev[1]].titulo}`];

      this.level > 2 &&
        arrUbicacion.push(
          `${this.data[this.prev[1]].subApartados[this.prev[2]].titulo}`
        );

      this.level > 3 &&
        arrUbicacion.push(
          `${
            this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
              this.prev[3]
            ].titulo
          }`
        );

      this.campos.spnTitulo.innerHTML = `Apartados (${arrUbicacion.join(
        " > "
      )})`;

      this.redibujar({ apartados: subApartados });
      this.level > 1 &&
        document
          .getElementById("btn-regresar-apartado")
          .classList.remove("d-none");
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  regresar: async function () {
    try {
      this.level--;
      let id = this.prev[this.level];
      await this.limpiar({
        nivel: this.level,
        idActual: id,
        sentido: "backward",
      });

      let apartados =
          this.level == 1
            ? this.data
            : this.level == 2
            ? this.data[this.prev[1]].subApartados
            : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados,
        arrUbicacion = [];

      this.level > 1 && arrUbicacion.push(`${this.data[this.prev[1]].titulo}`);

      this.level > 2 &&
        arrUbicacion.push(
          `${this.data[this.prev[1]].subApartados[this.prev[2]].titulo}`
        );

      this.campos.spnTitulo.innerHTML =
        this.level > 1
          ? `Apartados (${arrUbicacion.join(" > ")})`
          : `Apartados`;

      this.redibujar({ apartados });

      this.level == 1 &&
        document
          .getElementById("btn-regresar-apartado")
          .classList.add("d-none");
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  redibujar: function ({ apartados = [] }) {
    for (let key in apartados) {
      this.cnt = parseInt(key);
      const fila = this.prepararParaFila({
        datos: apartados[key],
        id: key,
      });
      this.tabla.agregarFila({ datos: fila, idfila: `trApartado${key}` });
    }

    this.tabla.redibujar();
  },
  eliminar: async function (id = 0) {
    let apartado =
      this.level == 1
        ? this.data[id]
        : this.level == 2
        ? this.data[this.prev[1]].subApartados[id]
        : this.level == 3
        ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[id]
        : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
            this.prev[3]
          ].subApartados[id];

    try {
      const confirmacion = await mostrarMensajes.confirm({
        message: `Se eliminará el apartado <b>${apartado.titulo}</b> <br /> Esta acción no se puede deshacer`,
      });

      if (!confirmacion) return;

      switch (this.level) {
        case 1:
          delete this.data[id];
          break;
        case 2:
          delete this.data[this.prev[1]].subApartados[id];
          break;
        case 3:
          delete this.data[this.prev[1]].subApartados[this.prev[2]]
            .subApartados[id];
          break;
        default:
          delete this.data[this.prev[1]].subApartados[this.prev[2]]
            .subApartados[this.prev[3]].subApartados[id];
          break;
      }
      this.tabla.eliminarFila({ idFila: `trApartado${id}` }).redibujar();
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  setMantenimiento: function ({ id, link }) {
    let tmp =
      this.level == 1
        ? this.data[id]
        : this.level == 2
        ? this.data[this.prev[1]].subApartados[id]
        : this.level == 3
        ? this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[id]
        : this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
            this.prev[3]
          ].subApartados[id];

    tmp.mantenimiento ??= 0;

    let mantenimiento = tmp.mantenimiento == 0 ? 1 : 0,
      iconoMostrado =
        mantenimiento == 0
          ? `<i class="fas fa-flag text-success"></i>`
          : `<i class="fas fa-tools text-warning"></i>`,
      iconoEnlace =
        mantenimiento == 0
          ? `<i class="fas fa-tools text-warning"></i>`
          : `<i class="fas fa-flag text-success"></i>`;

    this.tabla.actualizarFila({
      datos: {
        0: `${id} ${iconoMostrado}`,
      },
      idFila: `trApartado${id}`,
    });

    link.innerHTML =
      iconoEnlace +
      (mantenimiento == 0
        ? " Iniciar mantenimiento"
        : " Terminar mantenimiento");

    this.level == 1
      ? (this.data[id].mantenimiento = mantenimiento)
      : this.level == 2
      ? (this.data[this.prev[1]].subApartados[id].mantenimiento = mantenimiento)
      : this.level == 3
      ? (this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
          id
        ].mantenimiento = mantenimiento)
      : (this.data[this.prev[1]].subApartados[this.prev[2]].subApartados[
          this.prev[3]
        ].subApartados[id].mantenimiento = mantenimiento);
  },
  obtenerDatos: function () {
    return JSON.parse(JSON.stringify(Object.values(this.data)));
  },
};

function mostrarIconos({ claseBusqueda }) {
  let coincidencias = iconosFontAwesome.filter((icon) =>
      icon.includes(claseBusqueda)
    ),
    iconos = coincidencias.slice(0, 24),
    htmlIconos = iconos.map(
      (icon) =>
        `<div class="col-sm-2 col-md-2"><div class="d-flex justify-content-center align-items-center"><button type="button" class="icon-custom-container"><i class="icon-selector ${icon}"></i></button></div></div>`
    );
  document.getElementById("iconos-container").innerHTML = htmlIconos.join("");
}
