import "./rgb-slider.js";

const ws = new WebSocket("ws://localhost:8000/ws");

ws.onopen = () => {
  console.log("WebSocket connection established");
};

ws.onclose = () => {
  console.log("WebSocket connection closed");
};

ws.onerror = (error) => {
  console.error("WebSocket error:", error);
};

// Number of sliders (tabs) you want to create
const numTabs = 3;

// Select the container for tabs and content
const tabsContainer = document.querySelector(".tabs");
const tabContentContainer = document.querySelector(".zone-content");

// Create tabs dynamically
for (let i = 1; i <= numTabs; i++) {
  // Create the zone button
  const tabButton = document.createElement("button");
  tabButton.classList.add("zone");
  tabButton.id = `zone${i}`;
  tabButton.textContent = `Zone ${i}`;

  // Add the zone button to the container
  tabsContainer.appendChild(tabButton);

  // Create the corresponding zone content (RGB slider)
  const tabContent = document.createElement("div");
  tabContent.classList.add("zone-pane");
  tabContent.id = `content${i}`;
  const slider = document.createElement("rgb-slider");
  slider.id = i;
  tabContent.appendChild(slider);

  // Add the zone content to the container
  tabContentContainer.appendChild(tabContent);

  // Listen for color change on each RGB slider
  slider.addEventListener("color-change", (e) => {
    const { r, g, b } = e.detail;
    console.log(`Color changed in zone ${i}:`, e.detail);
    // Send RGB data to WebSocket server
    if (ws.readyState === WebSocket.OPEN) {
      const colorData = { r, g, b };
      ws.send(JSON.stringify(colorData));
    }
  });
}

// Function to switch tabs
function switchTab(zoneId) {
  const tabs = document.querySelectorAll(".zone");
  const tabContents = document.querySelectorAll(".zone-pane");

  zones.forEach((zone) => zone.classList.remove("active"));
  tabContents.forEach((content) => content.classList.remove("active"));

  // Activate the clicked zone and corresponding content
  document.getElementById(zoneId).classList.add("active");
  document
    .getElementById("content" + zoneId.replace("zone", ""))
    .classList.add("active");
}

// Add event listeners to tabs
tabsContainer.addEventListener("click", (e) => {
  if (e.target.classList.contains("zone")) {
    switchTab(e.target.id);
  }
});

// Initially set the first zone as active
switchTab("tab1");
