document.addEventListener("DOMContentLoaded", () => {
  let bubbleSettings = document.bubbleSettings;

  bubbleSettings.phone_number = "33970405280";


  let style = ``;

  if (bubbleSettings.show_mobile_only) {
    style += `
      @media (min-width: 768px) {
        #coco-body {
          display: none;
        }
      }
    `;
  }

  // Inject the style into the document
  if (style) {
    const styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = style;
    document.head.appendChild(styleSheet);
  }

  let positionStyle = "";
  if (bubbleSettings.tooltip_position === "full-coco-left") {
    positionStyle = "left: 15px; right: auto;"; // Place la bulle à gauche
  } else {
    positionStyle = "right: 15px; left: auto;"; // Garde la bulle à droite (position par défaut)
  }

  const breatheAnimation = bubbleSettings.disable_breathe
    ? ""
    : "animation: breathe 2s infinite ease-in-out;";

  document.getElementById("coco-body").innerHTML = /*html*/ `
  <style>
  /* import the font Karla */
  @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

  #coco-body {
    * { margin: 0; padding: 0; }
    font-family: 'Karla';
    font-style: normal;
    font-weight: 600;
    position: fixed;
    bottom: 15px; /* Ajustez la distance du bas selon vos besoins */
    ${positionStyle}
    z-index: 1; /* Assurez-vous que ce z-index est supérieur à celui des autres éléments */
  }
  
  #notification-bubble {
    position: fixed; /* Fixed plutôt qu'absolute pour qu'il reste en position relative à la viewport */
    bottom: 90px; /* Ajustez cette valeur pour décaler la bulle au-dessus de l'icône WhatsApp */
    ${positionStyle}
    background-color: ${bubbleSettings.text_color_background}; /* Fond noir */
    color: ${bubbleSettings.text_color}; /* Texte blanc */
    padding: 8px 20px; /* Ajustez le padding pour donner plus d'espace autour du texte */
    border-radius: 20px; /* Ajustez si nécessaire pour l'arrondi des coins */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Optionnel: ombre portée pour la bulle */
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    font-size: 14px;
    display: ${
      localStorage.getItem("notificationBubbleHidden") ? "none" : "flex"
    }
  }
  
  #notification-bubble-close {
    margin-left: 10px;
    cursor: pointer;
    color: ${
      bubbleSettings.cross_notification_color
    }; /* Texte blanc pour la croix */
    font-size: 20px; /* Ajustez la taille de la croix */
  }
  
  #whatsapp-icon {
    width: 62px; /* Size of the WhatsApp icon */
    height: 62px; /* Size of the WhatsApp icon */
    background-color: ${bubbleSettings.bubble_color}; /* WhatsApp brand color */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    ${breatheAnimation}
  }
  
  #whatsapp-icon img {
    width: 70%; /* Scaled size of the WhatsApp icon */
    ${breatheAnimation}
  }
  
  /* Optional: Add animations or transitions */
  
  #chat-widget-container {
    display: none;
    position: fixed;
    bottom: 90px; /* Ou toute autre valeur qui positionne le widget comme vous le souhaitez */
    ${positionStyle}
    max-width: 400px;
    width: 100%;
    z-index: 2;
  }

  @media (max-width: 768px) {
    #chat-widget-container {
      max-width: 340px; /* Spécifiez ici la largeur souhaitée pour les téléphones mobiles */
    }
  }
  
  #chat-widget {
    background: white;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
  }
  
  #chat-widget-header {
    background: ${bubbleSettings.header_color};
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #chat-widget-profile {
    display: flex;
    align-items: center;
    color: white;
  }
  
  #chat-widget-profile img {
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 5px;
    height: 32px;
    width: 32px;
  }
  
  #chat-widget-status-dot {
    height: 10px;
    width: 10px;
    background-color: green;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 5px;
    animation: blink 2s infinite; 
  }
  
  #chat-widget-close {
    font-size: 24px;
    cursor: pointer;
    color: ${bubbleSettings.cross_color};
    margin-right: 10px;
  }
  
  #chat-widget-content {
    flex: 1;
    padding: 20px;
  }
  
  #chat-widget-content button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    background: ${bubbleSettings.buttons_color};
    color: white;
    border-radius: 5px;
    cursor: pointer;
    border-radius: 20px 20px 20px 20px;
  }
  
  #chat-widget-footer {
    border-top: 1px solid #ccc;
    background: #F0F0F0;
    padding: 10px;
    display: flex;
    align-items: center;
  }
  
  #chat-widget-footer input {
    flex: 1;
    padding: 10px;
    border: none;
    margin: 0 10px;
    border-radius: 10px 10px 10px 10px;
  }
  
  #chat-widget-footer button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }
  
  #chat-widget-send {
    padding: 0 15px;
  }
  
  #chat-widget-plus {
    padding: 0 10px;
  }
  
  #chat-widget-profile .online-status {
    display: flex;
    align-items: center;
    color: green; /* Couleur du texte "En Ligne" */
    font-size: 14px; /* Taille du texte "En Ligne" */
    margin-left: 5px; /* Espacement à gauche du texte "En Ligne" */
  }
  
  #powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Taille du texte */
    margin-top: 10px; /* Espacement en haut */
    margin-bottom: 10px;
  }
  
  #powered-by img {
    margin-right: 5px; /* Espacement entre le texte et l'image */
  }

  .message-notification {
    position: absolute;
    top: -5px; /* Ajustez ces valeurs en fonction de votre layout */
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
  
  @keyframes breathe {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  </style>

  <div id="notification-bubble">
    <span id="notification-bubble-text">${
      bubbleSettings.whatsapp_message
    }</span>
    <span id="notification-bubble-close">×</span>
  </div>
  <div id="whatsapp-icon">
    <img src="https://my-coco.ai/wp-content/uploads/2024/01/whatsapp-ia-coco-sale-e-commerce-shopify.png" alt="WhatsApp"/>
  </div>
  <div id="message-notification" class="message-notification">1</div>

  <div id="chat-widget-container">
    <div id="chat-widget">
      <header id="chat-widget-header">
        <div id="chat-widget-profile">
          <img src="${bubbleSettings.shop_pic}" alt="Profile" />
          <span>${bubbleSettings.shop_name}</span>
          <div class="online-status">
            <div id="chat-widget-status-dot"></div>
            <span>${bubbleSettings.status}</span>
          </div>
        </div>
        <div id="chat-widget-close">&times;</div>
      </header>
      <div id="chat-messages" style="margin-top: 20px; margin-left: 10px; margin-right: 10px;"></div>
      <div id="chat-widget-content">
        <button id="buttonOne">${bubbleSettings.button_one}</button>
        <button id="buttonTwo">${bubbleSettings.button_two}</button>
        <button id="buttonThree">${bubbleSettings.button_three}</button>
      </div>
      <div id="chat-widget-footer">
        <input type="text" placeholder="${bubbleSettings.pre_message_input}" />
        <button id="chat-widget-send">〉</button>
      </div>
      <div id="powered-by">
        <img src="https://my-coco.ai/wp-content/uploads/2024/01/2.png" alt="CoCo Logo" width="24" height="24">
        <a href="https://my-coco.ai/" target="_blank">Powered by CoCo</a>
      </div>
    </div>
  </div>
  `;

  const chatWidget = document.getElementById("chat-widget-container");
  const whatsappIcon = document.getElementById("whatsapp-icon");
  const notificationBubble = document.getElementById("notification-bubble");
  const closeChat = document.getElementById("chat-widget-close");
  const sendMessageButton = document.getElementById("chat-widget-send");
  const messageInput = document.querySelector("#chat-widget-footer input");
  const chatMessages = document.getElementById("chat-messages");
  const closeAllMessages = document.getElementById("notification-bubble-close");
  const notificationText = document.getElementById("notification-bubble-text");
  const cocoBody = document.getElementById("coco-body");
  const headerChatBox = document.getElementById("chat-widget-header");

  function isMobile() {
    return /iPhone|iPad|iPod|Android|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent,
    );
  }

  function openWhatsAppLink(message) {
    let number = bubbleSettings.phone_number;

    if (bubbleSettings.is_relayed) {
      message = `@[${bubbleSettings.relaying_slug_name}]\n${message}`;
      number = bubbleSettings.relaying_phone_number;
    }

    const whatsappUrl =
      `https://api.whatsapp.com/send/?phone=${number}&text=` +
      encodeURIComponent(message);
    window.open(whatsappUrl, "_blank");
  }

  function simulateTyping() {
    const typingIndicator = document.createElement("div");
    typingIndicator.textContent = "...";
    typingIndicator.style.padding = "10px";
    typingIndicator.style.marginBottom = "10px";
    typingIndicator.style.borderRadius = "15px";
    typingIndicator.style.backgroundColor = "#f1f0f0";
    typingIndicator.style.color = "black";
    typingIndicator.style.marginLeft = "20px";
    chatMessages.appendChild(typingIndicator);

    setTimeout(() => {
      chatMessages.removeChild(typingIndicator);
      displayWelcomeMessage();
    }, 2000);
  }

  function displayWelcomeMessage() {
    const messageElement = document.createElement("div");
    messageElement.textContent = bubbleSettings.whatsapp_message_inside;
    messageElement.style.padding = "10px";
    messageElement.style.marginBottom = "10px";
    messageElement.style.borderRadius = "15px";
    messageElement.style.backgroundColor = "#f1f0f0";
    messageElement.style.color = "black";
    chatMessages.appendChild(messageElement);
  }

  function toggleChatWidget(keepClosed = false) {
    if (chatWidget.style.display === "block") {
      minimizeChatWidget();
      if (keepClosed) {
        localStorage.setItem("keepClosed", "true");
      }
    } else {
      maximizeChatWidget();
    }
  }

  function minimizeChatWidget() {
    if (chatWidget.style.display !== "block") {
      return; // Ne rien faire si le widget de chat est déjà fermé
    }
    chatWidget.style.display = "none";
    showTextNotification();
    chatMessages.innerHTML = ""; // Clear messages when chat widget is closed
    console.log("TOGGLE CHAT WIDGET - MINIMIZE");
    startChangeNotificationText();
    if (!bubbleSettings.show_notification_bubble) {
      notificationBubble.style.display = "none";
    }
  }

  function maximizeChatWidget() {
    if (chatWidget.style.display === "block") {
      return; // Ne rien faire si le widget de chat est déjà ouvert
    }
    chatWidget.style.display = "block";
    hideTextNotification();
    simulateTyping();
    console.log("TOGGLE CHAT WIDGET - MAXIMIZE");
    stopChangeNotificationText();
  }

  function hideTextNotification(keepHidden = false) {
    notificationBubble.style.display = "none";
    if (keepHidden) {
      localStorage.setItem("notificationBubbleHidden", "true");
    }
  }

  function showTextNotification() {
    notificationBubble.style.display = "flex";
    localStorage.removeItem("notificationBubbleHidden");
  }

  notificationText.addEventListener("click", toggleChatWidget);
  headerChatBox.addEventListener("click", toggleChatWidget);
  closeAllMessages.addEventListener("click", () => {
    bubbleSettings.show_notification_bubble = false;
    localStorage.setItem("notificationBubbleHidden", "true");
    notificationBubble.style.display = "none";
    if (!bubbleSettings.show_notification_bubble) {
      notificationBubble.style.display = "none";
    }
  });
  sendMessageButton.addEventListener("click", () => {
    const message = messageInput.value.trim();
    if (message) {
      openWhatsAppLink(message);
      messageInput.value = "";
    }
  });

  messageInput.addEventListener("keypress", (e) => {
    if (e.key === "Enter" || e.keyCode === 13) {
      e.preventDefault();
      sendMessageButton.click();
    }
  });

  if (bubbleSettings.hide_coco_mention) {
    document.getElementById("powered-by").style.display = "none";
  }

  if (!bubbleSettings.show_notification_bubble) {
    notificationBubble.style.display = "none";
  }

  document.getElementById("buttonOne").addEventListener("click", () => {
    openWhatsAppLink(bubbleSettings.button_one);
  });

  document.getElementById("buttonTwo").addEventListener("click", () => {
    openWhatsAppLink(bubbleSettings.button_two);
  });

  document.getElementById("buttonThree").addEventListener("click", () => {
    openWhatsAppLink(bubbleSettings.button_three);
  });

  whatsappIcon.addEventListener("click", toggleChatWidget);

  const whatsAppDelayMs = Number.parseInt(bubbleSettings.whatsapp_delay);
  if (
    !isMobile() &&
    Number.isInteger(whatsAppDelayMs) &&
    !localStorage.getItem("keepClosed")
  ) {
    setTimeout(maximizeChatWidget, bubbleSettings.whatsapp_delay);
  }

  let changeNotificationTextInterval = null;

  function startChangeNotificationText() {
    if (changeNotificationTextInterval) return;

    let i = 1;
    const messages = [
      bubbleSettings.whatsapp_message,
      bubbleSettings.button_one,
      bubbleSettings.button_two,
      bubbleSettings.button_three,
    ];

    changeNotificationTextInterval = setInterval(() => {
      notificationText.textContent = messages[i];
      i = (i + 1) % messages.length;
    }, 3500);
  }

  function stopChangeNotificationText() {
    if (!changeNotificationTextInterval) return;
    clearInterval(changeNotificationTextInterval);
    notificationText.textContent = bubbleSettings.whatsapp_message;
    changeNotificationTextInterval = null;
  }

  startChangeNotificationText();
});