//creacion de sponer
//https://loading.io/

//
$(document).ready(function () {
   cargando_imagen();
   //evento que se dispara para seleccionar foto

   var abrir_toggle = false;

   scroll_abajo();

   if ($("#ms-menu-trigger")[0]) {
      $("body").on("click", "#ms-menu-trigger", function () {
         $(".ms-menu").toggleClass("toggled");
         var screenWidth = $(window).width();
         console.log(screenWidth);

         /*  if (screenWidth <= 731) {
            $(".ms-menu").css("display", "");
            $(".ms-body").css("padding-left", "0px");
            $(".ms-menu").toggleClass("toggled");
            return;
         }

         if (abrir_toggle != true) {
            $(".ms-menu").css("display", "none");
            $(".ms-body").css("padding-left", "0px");
            $(".ms-menu").toggleClass("toggled");
         } else {
            $(".ms-menu").css("display", "");
            $(".ms-body").css("padding-left", "240px");
         } */

         abrir_toggle = !abrir_toggle;
      });
   }

   $(window).resize(function () {
      screenWidth = $(window).width();
      /* if ($(".ms-menu").hasClass("toggled")) {
         if (screenWidth >= 770) {
            //abrir_toggle = true;
            // $(".ms-body").css("padding-left", "240px");
            //$(".ms-menu").css("display", "");
            $(".ms-body").css("padding-left", "0px");
            $(".ms-menu").css("display", "none");
            $(".ms-menu").toggleClass("toggled");
         } else {
            $(".ms-body").css("padding-left", "0px");
            $(".ms-menu").css("display", "none");
            //$(".ms-body").css("padding-left", "0px");
         }
         //console.log("La clase 'toggled' está presente.");
      } else {
         //console.log("La clase 'toggled' no está presente.");

         if (screenWidth <= 770) {
            //$(".ms-menu").css("display", "");
            $(".ms-body").css("padding-left", "0px");
         } else {
            $(".ms-body").css("padding-left", "240px");
         }
      } */
      // Obtener el nuevo ancho de la pantalla
      //screenWidth = $(window).width();
      //console.log("Ancho de la pantalla actualizado: " + screenWidth + "px");
   });
});

/* function scroll_abajo() {
   //me permite bajar hacia abajo del cuerpo mensaje
   $(".cuerpo_mensaje").animate(
      {
         scrollTop: $(".cuerpo_mensaje")[0].scrollHeight,
      },
      "slow",
   );
} */

function scroll_abajo() {
   /* return new Promise((resolve, reject) => {
      $(".cuerpo_mensaje").animate(
         {
            scrollTop: $(".cuerpo_mensaje")[0].scrollHeight,
         },
         "slow",
         function () {
            // La animación ha terminado, resolvemos la promesa
            resolve(true);
         },
      );
   }); */

   /* return new Promise((resolve, reject) => {
      try {
         // Mover el scroll al final sin animación
         $(".cuerpo_mensaje").scrollTop($(".cuerpo_mensaje")[0].scrollHeight);

         // Resolver la promesa inmediatamente después de mover el scroll
         resolve(true);
      } catch (error) {
         // Manejar el error y rechazar la promesa si ocurre un problema
         reject(error);
      }
   }); */

   return new Promise((resolve, reject) => {
      try {
         // Verificar si el elemento con la clase 'cuerpo_mensaje' existe
         const elemento = $(".cuerpo_mensaje");

         if (elemento.length > 0) {
            // Mover el scroll al final sin animación
            elemento.scrollTop(elemento[0].scrollHeight);

            // Resolver la promesa inmediatamente después de mover el scroll
            resolve(true);
         }
      } catch (error) {
         // Manejar el error y rechazar la promesa si ocurre un problema
         reject(error);
      }
   });
}

function isEmpty(variable) {
   if (variable === null || variable === undefined) {
      return true;
   }

   if (typeof variable === "string") {
      return variable.trim() === "";
   }

   if (Array.isArray(variable)) {
      return variable.length === 0;
   }

   if (typeof variable === "object") {
      return Object.keys(variable).length === 0;
   }

   return false;
}

function resizeImage(file, maxWidth, maxHeight) {
   return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onload = (event) => {
         const img = new Image();
         img.src = event.target.result;

         img.onload = () => {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");

            if (ctx) {
               const canvasWidth = maxWidth;
               const canvasHeight = maxHeight;

               let width = img.width;
               let height = img.height;

               if (width > height) {
                  if (width > maxWidth) {
                     height *= maxWidth / width;
                     width = maxWidth;
                  }
               } else {
                  if (height > maxHeight) {
                     width *= maxHeight / height;
                     height = maxHeight;
                  }
               }

               const x = (canvasWidth - width) / 2;
               const y = (canvasHeight - height) / 2;

               // Establecer el tamaño del lienzo
               canvas.width = canvasWidth;
               canvas.height = canvasHeight;

               // Rellenar el lienzo con color transparente
               ctx.fillStyle = "rgba(0, 0, 0, 0)"; // Rellena con color transparente
               ctx.fillRect(0, 0, canvasWidth, canvasHeight); // Rellena todo el lienzo

               // Dibujar la imagen centrada en el lienzo
               ctx.drawImage(img, x, y, width, height);

               const base64Canvas = canvas.toDataURL("image/png", 1);

               resolve(base64Canvas);
            } else {
               reject(
                  new Error(
                     "El contexto 2D del lienzo no se ha creado correctamente.",
                  ),
               );
            }
         };

         img.onerror = (error) => {
            reject(error);
         };
      };

      reader.onerror = (error) => {
         reject(error);
      };
   });
}

function cargando_imagen(cargar_ultima = "") {
   return new Promise((resolve, reject) => {
      const imagenes = $(".imagen_imagen" + cargar_ultima);

      imagenes.each(function (index) {
         let imagen = $(this);
         let spinner = imagen.siblings(".spinner");
         let fallbackSrc = "img/error_imagen.png"; // Ruta a la imagen de reemplazo

         // Mostrar el spinner inicialmente
         spinner.show();
         imagen.hide(); // Ocultar la imagen inicialmente

         // Evento cuando la imagen se carga completamente
         imagen.on("load", async function () {
            await sleep(500); // Pausa de 1 segundo
            imagen.show(); // Mostrar la imagen
            spinner.hide(); // Ocultar el spinner
            if (cargar_ultima === ":last" && index === imagenes.length - 1) {
               resolve(true); // Resolver la promesa si es la última imagen
            }
         });

         // Evento cuando ocurre un error al cargar la imagen
         imagen.on("error", function () {
            this.onerror = null;
            if (imagen.attr("src") !== fallbackSrc) {
               imagen.attr("src", fallbackSrc); // Cambiar a la imagen de error
            } else {
               spinner.hide(); // Ocultar el spinner si ya se intentó con la imagen de error
               //console.log("Error al cargar la imagen:", imagen.attr("src"));
               if (cargar_ultima === ":last" && index === imagenes.length - 1) {
                  reject(false); // Rechazar la promesa si es la última imagen
               }
            }
         });

         // Si la imagen ya está en caché
         if (imagen[0].complete && imagen[0].naturalHeight !== 0) {
            imagen.trigger("load");
         }
      });

      if (cargar_ultima !== ":last") {
         // Resolver la promesa inmediatamente si no es :last
         resolve(true);
      }
   });
}

function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
}

async function cargar_listado_contactos_api(url_base, user_id) {
   return new Promise((resolve, reject) => {
      $.get(
         url_base + "chat_system/tener-contactos/" + user_id,
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info.data);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_listado_contactos_api: " +
                     error.message,
               );
               reject([]);
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_listado_contactos_api: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject([]);
      });
   });
}

async function tener_usuario_sistema_by_id(url_base, user_id) {
   return new Promise((resolve, reject) => {
      $.get(
         url_base + "chat_system/tener-info-usuario-sistem/" + user_id,
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_listado_contactos_api: " +
                     error.message,
               );
               reject(info);
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_listado_contactos_api: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject({
            type: "error",
            data: {},
         });
      });
   });
}

async function api_marcar_leidos(url_base, from_user_id, to_user_id) {
   return new Promise((resolve, reject) => {
      var datos = {
         to_user_id: to_user_id,
         from_user_id: from_user_id,
      };

      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "chat_system/api-marcar-leidos/",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            try {
               let info = JSON.parse(response);
               resolve(info);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta api_marcar_leidos: " +
                     error.message,
               );
               reject({
                  type: "error",
                  message: error.message,
                  data: [],
                  details: null,
               });
            }
         },
         error: function (xhr, status, error) {
            console.log(
               "Error en la solicitud api_marcar_leidos: " +
                  status +
                  " - " +
                  error,
            );
            reject({
               type: "error",
               message: "!Error marking messages as read¡",
               data: [],
               details: null,
            });
         },
      });
   });
}

async function cargar_listado_chat_contactos_api(
   url_base,
   from_user_id,
   to_user_id,
) {
   return new Promise((resolve, reject) => {
      var datos = {
         to_user_id: to_user_id,
         from_user_id: from_user_id,
      };

      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "chat_system/tener-chat-contacto/",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            try {
               let info = JSON.parse(response);
               resolve(info.data || []);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_listado_chat_contactos_api: " +
                     error.message,
               );
               reject([]);
            }
         },
         error: function (xhr, status, error) {
            console.log(
               "Error en la solicitud cargar_listado_chat_contactos_api: " +
                  status +
                  " - " +
                  error,
            );
            reject([]);
         },
      });
   });
}

async function cargar_listado_chat_contactos_by_last_id_api(
   url_base,
   to_user_id, // chat de la persona a cargar
   from_user_id, //mio
   last_id,
) {
   return new Promise(async (resolve, reject) => {
      var datos = {
         to_user_id: to_user_id,
         from_user_id: from_user_id,
         last_id: last_id,
      };

      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "chat_system/get-chat-numero-by-last-id/",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            try {
               let info = JSON.parse(response);
               resolve({
                  data: info.data || [],
                  cargado: false,
               });
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_listado_chat_contactos_by_last_id_api: " +
                     error.message,
               );
               reject({
                  data: [],
                  cargado: false,
               });
            }
         },
         error: function (xhr, status, error) {
            console.log(
               "Error en la solicitud cargar_listado_chat_contactos_by_last_id_api: " +
                  status +
                  " - " +
                  error,
            );
            reject({
               data: [],
               cargado: false,
            });
         },
      });
   });
}

async function cargar_listado_statt_api(url_base, config_whatsapp_other_id) {
   return new Promise((resolve, reject) => {
      $.get(
         url_base + "social/listado-staff/" + config_whatsapp_other_id,
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info.data);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_listado_statt_api: " +
                     error.message,
               );
               reject([]);
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_listado_statt_api: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject([]);
      });
   });
}

async function cargar_listado_custumers_api(url_base) {
   return new Promise((resolve, reject) => {
      $.get(url_base + "social/listado-custumers/", function (data) {
         try {
            let info = JSON.parse(data);
            resolve(info.data);
         } catch (error) {
            console.log(
               "Error al parsear la respuesta cargar_listado_custumers_api: " +
                  error.message,
            );
            reject([]);
         }
      }).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_listado_custumers_api: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject([]);
      });
   });
}

function formatDateTime(date) {
   const days = date.getDate().toString().padStart(2, "0");
   const months = (date.getMonth() + 1).toString().padStart(2, "0"); // Los meses en JavaScript son 0-11
   const years = date.getFullYear();

   let hours = date.getHours();
   const minutes = date.getMinutes().toString().padStart(2, "0");
   const ampm = hours >= 12 ? "pm" : "am";

   hours = hours % 12;
   hours = hours ? hours : 12; // La hora 0 se muestra como 12
   hours = hours.toString().padStart(2, "0");

   return `${days}-${months}-${years} ${hours}:${minutes} ${ampm}`;
}

function setting_offcanvas(
   data = null,
   listado_custumers = null,
   listado_staff = null,
) {
   var $offcanvasMenu = $("#offcanvas-menu");
   var $offcanvasBackdrop = $("#offcanvas-backdrop");
   var $offcanvasClose = $(".btn-close-offcanvas");

   $("#setting-offcanvas").on("click", function () {
      if (data != null && listado_custumers == null && listado_staff == null) {
      }

      $offcanvasMenu.toggleClass("offcanvas-show");
      $offcanvasBackdrop.toggle();
   });

   $offcanvasBackdrop.on("click", function () {
      $offcanvasMenu.removeClass("offcanvas-show");
      $offcanvasBackdrop.hide();

      $(".custumers_div").html("");
      $(".staff_div").html("");
      $(".select_staff").val("");
      $(".select_custumers").val("");
   });

   $offcanvasClose.on("click", function () {
      $offcanvasMenu.removeClass("offcanvas-show");
      $offcanvasBackdrop.hide();

      $(".custumers_div").html("");
      $(".staff_div").html("");
      $(".select_staff").val(null).trigger("change");
      $(".select_custumers").val(null).trigger("change");
   });
}

function aplicar_un_staff_y_custumers_api(
   url_base,
   id_contacto_seleccionado = 0,
   staff_id,
   custumers_id,
   config_whatsapp_other_id,
) {
   var datos = {
      chat_number_id: id_contacto_seleccionado,
      staff_id: staff_id,
      custumers_id: custumers_id,
      config_whatsapp_other_id: config_whatsapp_other_id,
   };

   $(".btn_aplicar_custumers_staff").prop("disabled", true);

   return new Promise((resolve, reject) => {
      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "social/asignar-staff-y-contactos-chat",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            $(".btn_aplicar_custumers_staff").prop("disabled", false);

            try {
               let info = JSON.parse(response);

               if (info.type == "success") {
                  //alert(info.data);

                  var $offcanvasMenu = $("#offcanvas-menu");
                  var $offcanvasBackdrop = $("#offcanvas-backdrop");

                  $offcanvasMenu.removeClass("offcanvas-show");
                  $offcanvasBackdrop.hide();

                  resolve(true);
               } else {
                  alert(info.data);
                  resolve(false);
               }
            } catch (error) {
               alert("Error:" + error);
               resolve(false);
            }
         },
         error: function (xhr, status, error) {
            console.error(
               "Error en la solicitud: aplicar_un_staff_y_custumers_api ",
               error,
            );
            $(".btn_aplicar_custumers_staff").prop("disabled", false);
            reject(false);
         },
      });
   });
}

function aplicar_un_custumers_api(
   url_base,
   id_contacto_seleccionado = 0,
   custumers_id,
) {
   var datos = {
      chat_number_id: id_contacto_seleccionado,
      custumers_id: custumers_id,
   };

   $(".btn_aplicar_custumers_staff").prop("disabled", true);

   return new Promise((resolve, reject) => {
      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "social/asignar-custumers-chat-empleado",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            $(".btn_aplicar_custumers_staff").prop("disabled", false);

            try {
               let info = JSON.parse(response);

               if (info.type == "success") {
                  //alert(info.data);

                  var $offcanvasMenu = $("#offcanvas-menu");
                  var $offcanvasBackdrop = $("#offcanvas-backdrop");

                  $offcanvasMenu.removeClass("offcanvas-show");
                  $offcanvasBackdrop.hide();

                  resolve(info);
               } else {
                  alert(info.mensaje);
                  resolve({
                     type: "error",
                     mensaje: info.mensaje,
                     data: {},
                  });
               }
            } catch (error) {
               alert("Error:" + error);
               resolve({
                  type: "error",
                  mensaje: error,
                  data: {},
               });
            }
         },
         error: function (xhr, status, error) {
            console.error(
               "Error en la solicitud: aplicar_un_staff_y_custumers_api ",
               error,
            );
            $(".btn_aplicar_custumers_staff").prop("disabled", info);
            reject({
               type: "error",
               mensaje: "¡Successfully assigned client!",
               data: {},
            });
         },
      });
   });
}

async function cargar_configuracion(url_base) {
   return new Promise((resolve, reject) => {
      $.get(
         url_base + "social/configuracion-whatsapp-activo/",
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_configuracion: " +
                     error.message,
               );
               reject({
                  type: "error",
                  data: {},
               });
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_configuracion: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject({
            type: "error",
            data: {},
         });
      });
   });
}

async function cargar_mi_configuracion_empleado(url_base, staff_id) {
   return new Promise((resolve, reject) => {
      $.get(
         url_base +
            "social/configuracion-whatsapp-other-id-empleados/" +
            staff_id,
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_mi_configuracion_empleado: " +
                     error.message,
               );
               reject({
                  type: "error",
                  data: {},
               });
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_mi_configuracion_empleado: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject({
            type: "error",
            data: {},
         });
      });
   });
}

function cargar_plantillas_whatsapp(
   url_base,
   whatssapp_business_account_id,
   limite,
   version_api_whatapp,
   token,
) {
   let datos = {
      whatssapp_business_account_id: whatssapp_business_account_id,
      limite: limite,
      version_api_whatapp: version_api_whatapp,
      token: token,
   };

   return new Promise((resolve, reject) => {
      // Realizar la solicitud POST
      $.ajax({
         type: "POST",
         url: url_base + "social/tener-plantillas-whatsapp",
         data: JSON.stringify(datos), // Convertir datos a formato JSON
         contentType: "application/json", // Tipo de contenido JSON
         success: function (response) {
            try {
               let info = JSON.parse(response);

               //console.log(info);
               if (info.type == "success") {
                  //alert(info.data);

                  resolve(info);
               } else {
                  alert(info.details);
                  resolve({
                     type: "error",
                  });
               }
            } catch (error) {
               alert("Error:" + error);
               resolve({
                  type: "error",
               });
            }
         },
         error: function (xhr, status, error) {
            console.error(
               "Error en la solicitud: cargar_plantillas_whatsapp ",
               error,
            );
            resolve({
               type: "error",
            });
         },
      });
   });
}

async function cargar_listado_configuracion_whatsapp_sms(url) {
   return new Promise((resolve, reject) => {
      $.get(
         url + "social/lista-configuracion-whatsapp-activo/",
         function (data) {
            try {
               let info = JSON.parse(data);
               resolve(info);
            } catch (error) {
               console.log(
                  "Error al parsear la respuesta cargar_configuracion: " +
                     error.message,
               );
               reject({
                  type: "error",
                  data: [],
               });
            }
         },
      ).fail(function (jqXHR, textStatus, errorThrown) {
         console.log(
            "Error en la solicitud cargar_configuracion: " +
               textStatus +
               " - " +
               errorThrown,
         );
         reject({
            type: "error",
            data: [],
         });
      });
   });
}

function obtenerExtension(url) {
   if (url == null || url == undefined || url == "") {
      return "Not Fount Extension";
   }

   // Divide la URL en partes usando el punto como delimitador
   let partes = url.split(".");

   return partes.pop();
}

function countElements(array) {
   let count = 0;
   function countRecursively(arr) {
      arr.forEach((element) => {
         if (Array.isArray(element)) {
            countRecursively(element);
         } else {
            count++;
         }
      });
   }
   countRecursively(array);
   return count;
}

function countNestedElements(examples) {
   const result = {};
   let cantidad = 0;
   for (const key in examples) {
      if (examples.hasOwnProperty(key)) {
         result[key] = {
            count: countElements(examples[key]),
            values: examples[key],
         };

         cantidad += countElements(examples[key]);
      }
   }
   return cantidad;
}

function reemplazarComodinPorText(text, placeholder, value) {
   let updatedText = text;

   // Escapar el placeholder para usarlo en una expresión regular
   const escapedPlaceholder = placeholder.replace(
      /[.*+?^${}()|[\]\\]/g,
      "\\$&",
   );

   const regex = new RegExp(escapedPlaceholder, "g");

   // Reemplazar el placeholder con el valor o mantener el placeholder si el valor está vacío
   updatedText = updatedText.replace(regex, value || placeholder);

   return updatedText;
}
