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.shop_name = "ØZERS";
bubbleSettings.shop_pic = "data:image/jpeg;base64,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";
bubbleSettings.whatsapp_message_inside = "Bonjour, quel est votre objectif ?";
bubbleSettings.button_two = "Je veux perdre du poids 🌱";
bubbleSettings.cross_color = "white";
bubbleSettings.whatsapp_delay  = "STOP";
bubbleSettings.whatsapp_message = "Quel est votre objectif ?";
bubbleSettings.button_three = "Je veux prendre de la masse 🏋️‍♂️";
bubbleSettings.button_one = "Je veux un code promo -10%";
bubbleSettings.status = "En ligne : réponse en 30s";


  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 {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 600;

    position: fixed;
    bottom: 15px; /* Ajustez la distance du bas selon vos besoins */
    ${positionStyle}
    z-index: 1001; /* 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: 1002;
  }

  @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();
    }
  });

  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() {
    if (chatWidget.style.display === "block") {
      minimizeChatWidget();
    } 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)) {
    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();
});