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.button_three = "J'ai une question";
bubbleSettings.shop_name = "Mademoiselle Cavaliere";
bubbleSettings.shop_pic = "https://mademoisellecavaliere.com/cdn/shop/files/Mademoiselle_Cavaliere_21-retoucher-parfum_11.jpg";
bubbleSettings.whatsapp_delay = "8000";
bubbleSettings.whatsapp_message_inside = "Bonjour, comment puis-je vous aider ?";
bubbleSettings.whatsapp_message = "Vous cherchez un produit ?";
bubbleSettings.button_one = "Je veux un code promo -10%";
bubbleSettings.button_two = "Je veux voir les pantalons";


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