import Usuario from "../models/usuarioModel.js?v=1.0.0";
import { NOMBRE_SESION } from "../app/constantes.js?v=1.0.0";
import {
  mostrarMensajes,
  mostrarToastify,
  obtenerHTMLBadge,
  validarContrasenia,
} from "../app/funcionesGenerales.js?v=1.0.0";
import metodosFormularios from "../app/metodosFormularios.js?v=1.0.0";

!(function () {
  document
    .getElementById("file-foto-usuario")
    .addEventListener("change", function (e) {
      configPerfil.actualizarFoto();
    });

  document.getElementById("password-form").addEventListener("submit", (e) => {
    e.preventDefault();
    configPerfil.cambiarContrasenia();
  });
})();

window.onload = () => {
  Promise.all([configPerfil.inicializar()])
    .then(() => {
      document.querySelector(".loader") &&
        document.querySelector(".loader").classList.add("d-none");

      configPerfil.campos.nuevaContrasenia.addEventListener(
        "focus",
        function () {
          document.getElementById("password-contain").style.display = "block";
        }
      );
      configPerfil.campos.nuevaContrasenia.addEventListener(
        "blur",
        function () {
          document.getElementById("password-contain").style.display = "none";
        }
      );

      configPerfil.campos.nuevaContrasenia.addEventListener(
        "keyup",
        function () {
          validarContrasenia(this.value);
        }
      );
    })
    .catch(mostrarMensajes.error);
};

const configPerfil = {
  inicializar: function () {
    return new Promise(async (resolve, reject) => {
      const id = localStorage.getItem(`${NOMBRE_SESION}-UId`);

      try {
        const { data: roles } = await Usuario.obtenerRoles({ id: atob(id) });

        const badges = roles.map((rolAsignado, index) => {
          const margenIzquierdo = index > 0 ? "ms-2" : "";
          return `<h4 class="float-start ${margenIzquierdo}">
          ${obtenerHTMLBadge({
            texto: rolAsignado.rol,
            tipo: "info",
          })}
            </h4>`;
        });

        document.getElementById("contenedor-roles").innerHTML = badges.join("");
        resolve();
      } catch (err) {
        reject(err);
      }
    });
  },
  campos: {
    nombres: document.getElementById("txt-nombres"),
    apellidos: document.getElementById("txt-apellidos"),
    email: document.getElementById("txt-email"),
    contraseniaActual: document.getElementById("txt-contrasenia-actual"),
    nuevaContrasenia: document.getElementById("txt-nueva-contrasenia"),
    confirmacionContrasenia: document.getElementById(
      "txt-confirmacion-contrasenia"
    ),
    archivo: document.getElementById("file-foto-usuario"),
    foto: document.getElementById("img-foto-usuario"),
  },
  actualizarFoto: async function () {
    if (!this.campos.archivo.value) return;

    const archivo = this.campos.archivo.files[0];

    const usuario = new Usuario({
      id: atob(localStorage.getItem(`${NOMBRE_SESION}-UId`)),
    });

    try {
      const respuesta = await usuario.actualizarFoto({ archivo });

      switch (respuesta.message) {
        case "success":
          const url = `main/assets/images/users/${
            respuesta.nombreArchivo
          }?v=${new Date().getTime()}`;

          this.campos.foto.setAttribute("src", url);
          document.getElementById("main-user-img").setAttribute("src", url);
          break;
        default:
          mostrarMensajes.error(respuesta);
          break;
      }
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
  cambiarContrasenia: async function () {
    if (!metodosFormularios.validar({ id: "password-form" })) return;

    const contraseniaActual = this.campos.contraseniaActual?.value.trim(),
      nuevaContrasenia = this.campos.nuevaContrasenia?.value.trim(),
      confirmacionContrasenia =
        this.campos.confirmacionContrasenia?.value.trim();

    if (!validarContrasenia(nuevaContrasenia)) {
      mostrarToastify({
        message: "La contraseña no cumple con los requisitos mínimos",
        type: "warning",
      });
      return;
    }

    if (contraseniaActual == nuevaContrasenia) {
      mostrarToastify({
        message: "La nueva contraseña debe ser diferente a la actual",
        type: "warning",
      });
      return;
    }

    if (nuevaContrasenia !== confirmacionContrasenia) {
      mostrarToastify({
        message: "La nueva contraseña no coincide con la confirmación",
        type: "warning",
      });
      return;
    }

    const usuario = new Usuario({
      id: atob(localStorage.getItem(`${NOMBRE_SESION}-UId`)),
    });

    try {
      const respuesta = await usuario.cambiarContrasenia({
        contrasenia: contraseniaActual,
        nuevaContrasenia,
      });

      switch (respuesta.message) {
        case "success":
          mostrarMensajes.success({
            message: "Contraseña cambiada correctamente",
          });

          document.getElementById("password-form").reset();
          break;
        case "contraseniaActualIncorrecta":
          mostrarMensajes.warning({
            message: "La contraseña actual no coíncide",
          });
          break;
        default:
          mostrarMensajes.error(respuesta);
          break;
      }
    } catch (err) {
      mostrarMensajes.error(err);
    }
  },
};
