$(document).ready(function () {
  // Initialize the fomantic ui dropdown
  initFomanticDropdown(".ui.custom-dropdown", { action: "hide" }, function () {
    // Handle the dropdown menu closing
    return {
      isChildEventShouldStop: true,
      childElement: ".ui.custom-dropdown .menu .item",
    };
  });
  initFomanticDropdown(".user-select-dropdown", { action: "activate" });



  //Handle opening / closing of inbox
//   $(".open-inbox").on("click", function () {
//     slideTransition("#chat-feature-widget", "left", true);
//     slideTransition("#inbox", "right", false);
//   });

  $("#back-to-users").on("click", function () {
    slideTransition("#inbox", "left", true);
    slideTransition("#chat-feature-widget", "right", false);
  });


});

function initFomanticDropdown(selector, config, callback = null) {
  $(selector).dropdown(config);

  if (typeof callback === "function") {
    // Call the callback and expect an object with properties
    const callbackResult = callback();
    if (callbackResult && callbackResult.isChildEventShouldStop) {
      $(callbackResult.childElement).on("click", function (event) {
        event.stopPropagation();
      });
    }
  }
}

function slideTransition(selector, direction, shouldHide) {
  //$(selector).transition(`slide ${direction}`);
  if (shouldHide) {
    $(selector).addClass("hidden");
  } else {
    $(selector).removeClass("hidden");
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const tabButtons = document.querySelectorAll(".dev-tabs button");
  const tabContents = document.querySelectorAll(".dev-tabcontent");

  tabButtons.forEach((button, index) => {
    button.addEventListener("click", () => {
      // Hide all tab contents
      tabContents.forEach((content) => {
        content.style.display = "none";
      });

      // Show the clicked tab content
      tabContents[index].style.display = "block";

      // Remove active class from all buttons
      tabButtons.forEach((btn) => {
        btn.classList.remove("active");
      });

      // Add active class to the clicked button
      button.classList.add("active");
    });
  });
  document.getElementById("defaultOpenTab").click();
});




// -----------
const supportWrapper = document.querySelector(".support-widget-wrapper");
const widgetWrapper = document.querySelector(".chat-widget-wrapper");
const optionsWrapper = document.querySelector(".options-widget-wrapper");
const wrappers = [ supportWrapper, optionsWrapper];
wrappers.forEach(wrapper => {
  if (wrapper) {
    wrapper.addEventListener("click", () => {
      const menu = wrapper.querySelector(".menu");
      if (menu.classList.contains("active")) {
        menu.classList.remove("active");
      } else {
        // First, close all menus
        wrappers.forEach(w => {
          if (w) {
            const otherMenu = w.querySelector(".menu");
            if (otherMenu !== menu) {
              otherMenu.classList.remove("active");
              otherMenu.classList.remove("open");
            }
          }
        });
        // Then, toggle the active class for the clicked menu
        menu.classList.add("active");
      }
    });
  }
});
widgetWrapper.querySelector("img").addEventListener("click", () => {
  const menu = widgetWrapper.querySelector(".menu");
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
  } else {
    // Then, toggle the active class for the clicked menu
    menu.classList.add("active");
  }
});


const sidebarArea = document.querySelector(".sidebar-area")

const toggleSidebar = ()=> {
    if(sidebarArea){
      sidebarArea.classList.contains("active") ? sidebarArea.classList.remove("active") : sidebarArea.classList.add("active");
    }
}

Array.from(document.querySelectorAll(".dev-toggle-sidebar")).forEach(item=> {
  if(item){
    item.addEventListener("click", toggleSidebar)
  }
  else {
    console.log(item);
  }
})