var rockee_widgetside = "left";
var rockee_content_id = document.currentScript.getAttribute(
  "data-rockee-chat-content-id"
);
var auto_show = document.currentScript.getAttribute("data-rockee-auto-show");
var scroll_percentage = document.currentScript.getAttribute(
  "data-rockee-scroll-percentage"
);
var rockee_app_url = "https://dev-widgetungated.rockee.app/";
var parenturl = parent.document.URL;
var title = document.title;
var autoOpenFlag = false;
var chatIcon;
let widgetData = null;
let apiUrl= null;


// // Checking app version
if (document.currentScript.src.includes("version-test")) {
  rockee_app_url = "https://dev-widgetungated.rockee.app/";
  apiUrl= "https://dev-chatwidget.rockee.app/widgetData"
} else {
  rockee_app_url = "https://widgetungated.rockee.app/";
  apiUrl= "https://chatwidget.rockee.app/widgetData"
}

var rockee_chat_widget = new URL(rockee_app_url);
rockee_chat_widget.searchParams.append("content_id", rockee_content_id);
rockee_chat_widget.searchParams.append("websiteTitle", title);
rockee_chat_widget.searchParams.append("websiteSourceURL", parenturl);
var side = rockee_widgetside;

// HTML for the chat widget
var chatWidgetHtml = `
<div class="rockee-chat-window">
  <div class="rockee-chat-header">
    <div class="rockee-chat-title"></div>
    <div class="rockee-chat-close">&times;</div>
  </div>
  <iframe class="rockee-chat-iframe" loading="lazy" frameborder="0" scrolling="no" src=""></iframe>
</div>
<div class="rockee-chat-widget"></div>
`;

// CSS styles for the chat widget
var chatWidgetStyle = `
div#rockee-chat-wrap.rcw-right {
  display: inline-block;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999999999;
}

div#rockee-chat-wrap.rcw-null,
div#rockee-chat-wrap.rcw-left {
  display: inline-block;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 999999999;
}

.rockee-chat-widget {
  cursor: pointer;
  transition: opacity 0.5s;
  opacity: 0;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 96px;
  height: 96px;
  display: none;
  float: left;
}

div#rockee-chat-wrap.rcw-right .rockee-chat-widget {
  float: right;
}

.rockee-chat-widget.show,
.rockee-chat-widget.visible {
  opacity: 1;
  display: inline-block;
}

.rockee-chat-widget.visible {
  background-image: url();
}

.rockee-chat-window {
  display: none;
  bottom: 108px;
  width: 350px;
  height: 265px;
  background-color: #fff;
 border: 1px solid #ce1313;
 
}

.rockee-chat-header {
  background-color: #ce1313;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space between;
  align-items: center;
  font-size: 20px;
}

.rockee-chat-title {
  font-weight: 700;
}

.rockee-chat-close {
  cursor: pointer;
  font-size: 30px;
  display: none;
}

.rockee-chat-close:hover {
  color: #888;
}

.rockee-chat-iframe {
  width: calc(100% - 1px);
  height: calc(100% - 20px);
  border: none;
}`;

async function fetchWidgetData(contentId) {
  try{
    const response = await fetch(`${apiUrl}?contentId=${contentId}`);
    if(!response.ok){
      throw new Error(`Network response was not ok: ${response.status}`);
    }
    widgetData = await response.json();
    applyWidgetData();
  } catch(error){
    console.error('Error fetching widgetdata', error);
  }

}

function applyWidgetData() {
  if (widgetData) {
    const openSVG = widgetData.open_svg;
    const closeSVG = widgetData.close_svg;
    document.querySelector(
      ".rockee-chat-widget"
    ).style.backgroundImage = `url("${openSVG}")`;

    // Checking if .rockee-chat-widget has .visible class and apply different background image accordingly
    const chatWidget = document.querySelector(".rockee-chat-widget");
    if (chatWidget.classList.contains("visible")) {
      chatWidget.style.backgroundImage = `url("${closeSVG}")`;
    }
    document.querySelector(".rockee-chat-window").style.borderColor =
      widgetData.chat_widget_border_color;
    document.querySelector(".rockee-chat-header").style.backgroundColor =
      widgetData.chat_widget_backgroud_color;
  }
}


function initializeChatWidget() {
  var chatWidgetContainer = document.createElement("div");
  chatWidgetContainer.id = "rockee-chat-wrap";
  chatWidgetContainer.className = "rcw-" + rockee_widgetside;
  chatWidgetContainer.innerHTML = chatWidgetHtml;
  document.body.appendChild(chatWidgetContainer);

  var styleElement = document.createElement("style");
  styleElement.textContent = chatWidgetStyle;
  document.head.appendChild(styleElement);

  var chatWrap = document.querySelector("#rockee-chat-wrap");
  var chatWindow = document.querySelector(".rockee-chat-window");
  var chatIFrame = document.querySelector(".rockee-chat-iframe");
  chatIcon = document.querySelector(".rockee-chat-widget");

  chatIcon.addEventListener("click", function () {
    if (chatWrap.classList.contains("show")) {
      chatWrap.classList.remove("show");
      chatWindow.style.display = "none";
      chatIcon.classList.remove("visible");
      chatIcon.classList.add("invisible");
      chatIFrame.src = "";
      if (autoOpenFlag == true) {
        autoOpenFlag = false;
      }
      window.addEventListener("scroll", function () {
        if (window.scrollY > window.innerHeight * 0.1) {
          chatIcon.classList.add("show");
        } else {
          chatIcon.classList.remove("show");
        }
      });
    } else {
      chatWrap.classList.add("show");
      chatWindow.style.display = "block";
      chatIcon.classList.remove("invisible");
      chatIcon.classList.add("visible");
      chatIFrame.src = rockee_chat_widget.toString();
    }
    if (!widgetData) {
      fetchWidgetData(rockee_content_id); // Fetch data if it hasn't been fetched yet
    } else {
      applyWidgetData();
    }
  });

  var wheight = Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
  );

  if (scroll_percentage === null && auto_show === "yes") {
    scroll_percentage = 70;
  }

  if (auto_show === "yes") {
    autoOpenFlag = true;
  
  }

  if (auto_show === null || autoOpenFlag == false) {
    window.addEventListener("scroll", function () {
      if (window.scrollY > window.innerHeight * 0.1) {
        chatIcon.classList.add("show");
      } else {
        chatIcon.classList.remove("show");
      }
    });
  }

  if (
    !isNaN(parseFloat(scroll_percentage)) &&
    isFinite(scroll_percentage) &&
    autoOpenFlag === true
  ) {
    var scrollThreshold =
      (wheight - window.innerHeight) * (parseFloat(scroll_percentage) / 100);
    window.addEventListener("scroll", function () {
      if (
        window.scrollY > scrollThreshold &&
        auto_show === "yes" &&
        autoOpenFlag == true &&
        !chatWrap.classList.contains("show")
      ) {
        chatWrap.classList.add("show");
        chatWindow.style.display = "block";
        chatIcon.classList.remove("invisible");
        chatIcon.classList.add("visible");
        chatIFrame.src = rockee_chat_widget.toString();
        applyWidgetData();
      }
    });
  }
  fetchWidgetData(rockee_content_id);
}


// Initializing the chat widget
if (
  document.readyState === "interactive" ||
  document.readyState === "complete"
) {
  initializeChatWidget();
  //fetchWidgetData(rockee_content_id);
} else {
  window.addEventListener("DOMContentLoaded", initializeChatWidget);
  //fetchWidgetData(rockee_content_id);
}