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

  /*
    bubbleSettings.bubble_color; OK
    bubbleSettings.cross_color; OK
    bubbleSettings.phone_number;
    bubbleSettings.shop_name; OK
    bubbleSettings.shop_pic; OK
    bubbleSettings.show_mobile_only;
    bubbleSettings.show_whatsapp;
    bubbleSettings.text_color; OK
    bubbleSettings.text_color_background; OK
    bubbleSettings.tooltip_position;
    bubbleSettings.whatsapp_delay;
    bubbleSettings.whatsapp_message;
    bubbleSettings.whatsapp_message_inside;
    bubbleSettings.pre_message_input;
    bubbleSettings.status;
    bubbleSettings.total_delay;
    bubbleSettings.buttons_color;
    bubbleSettings.header_color;
    */

  bubbleSettings.whatsapp_message = "Quelle est votre problématique ?";
bubbleSettings.button_three = "Je veux mon code -10%";
bubbleSettings.whatsapp_message_inside = "Quelle est votre problématique ?";
bubbleSettings.button_two = "J'ai un problème d'odeur / irritation";
bubbleSettings.shop_name = "Laura";
bubbleSettings.button_one = "Je cherche un soin intime adapté";
bubbleSettings.shop_pic = "data:image/jpeg;base64,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";


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

  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)
  }

  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: ${
      // hide the notification bubble if it was hidden by the user
      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;
     animation: breathe 2s infinite ease-in-out; 
  }
  
  #whatsapp-icon img {
    width: 70%; /* Scaled size of the WhatsApp icon */
     animation: breathe 2s infinite ease-in-out; 
  }
  
  /* 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>


<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"></img><a href="https://my-coco.ai/" target="_blank"> Powered by CoCo</a>
  </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) {
    const whatsappUrl =
      `https://api.whatsapp.com/send/?phone=${bubbleSettings.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);
  }

  notificationText.addEventListener("click", toggleChatWidget);
  headerChatBox.addEventListener("click", toggleChatWidget);
  closeAllMessages.addEventListener("click", hideTextNotification);
  sendMessageButton.addEventListener("click", function () {
    const message = messageInput.value.trim();
    if (message) {
      openWhatsAppLink(message);
      messageInput.value = "";
    }
  });

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

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

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

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

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

  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é
    }

    // Si le widget de chat est ouvert, fermez-le
    chatWidget.style.display = "none";
    showTexTNotification();
    chatMessages.innerHTML = ""; // Clear messages when chat widget is closed
    isWelcomeMessageShown = false; // Réinitialise le drapeau pour permettre la simulation à la prochaine ouverture

    console.log("TOGGLE CHAT WIDGET - MINIMIZE");
    startChangeNotificationText();
  }

  function maximizeChatWidget() {
    if (chatWidget.style.display === "block") {
      return; // Ne rien faire si le widget de chat est déjà ouvert
    }

    // Sinon, ouvrez le widget de chat et simulez le message de bienvenue
    chatWidget.style.display = "block";
    hideTextNotification();
    simulateTyping();

    console.log("TOGGLE CHAT WIDGET - MAXIMIZE");
    stopChangeNotificationText();
  }

  function hideTextNotification(keepHidden = false) {
    notificationBubble.style.display = "none";

    if (keepHidden) {
      // store it in local storage
      localStorage.setItem("notificationBubbleHidden", "true");
    }
  }

  function showTexTNotification() {
    notificationBubble.style.display = "flex";

    // remove it from local storage
    localStorage.removeItem("notificationBubbleHidden");
  }

  // Attachez cette nouvelle fonction toggle au clic de l'icône WhatsApp
  whatsappIcon.addEventListener("click", toggleChatWidget);

  // Ouvrir automatiquement le chat widget après X secondes, seulement si pas mobile
  const whatsAppDelayMs = Number.parseInt(bubbleSettings.whatsapp_delay);
  if (
    !isMobile() &&
    Number.isInteger(whatsAppDelayMs) &&
    !localStorage.getItem("keepClosed")
  ) {
    setTimeout(maximizeChatWidget, bubbleSettings.whatsapp_delay);
  }

  // change notificationText inner text between three values every 4 seconds in loop
  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(() => {
      console.log("changing text");
      // animate a fade out effect
      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();
});