// Import the LightComponent from light-component.js
import { LightComponent } from "./light-component.js";
import { getWebSocket } from "./websocket.js";

// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", async () => {
  // Select the container where the light-components will be added
  const appContainer = document.getElementById("app");

  // Fetch the JSON data from the /light endpoint
  try {
    const response = await fetch("/light");
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const lightData = await response.json();

    // Map to store backend IDs and their corresponding components
    const componentMap = new Map();

    // Function to create and configure a light component
    function createLightComponent(data, key) {
      const lightComponent = document.createElement("light-component");
      lightComponent.style.left = `${data.x}px`; // Set the x position
      lightComponent.style.top = `${data.y}px`; // Set the y position
      lightComponent.style.backgroundColor = data.settings?.color || "#4caf50"; // Set the background color
      lightComponent.textContent = data.name || "Light Me Up!"; // Set the text content

      // Set the lightId property
      lightComponent.lightId = key; // Use the backend ID as the lightId

      // Store the component in the map
      componentMap.set(key, lightComponent);

      // Append the light component to the container
      appContainer.appendChild(lightComponent);

      // Handle position change
      lightComponent.addEventListener("position-change", (event) => {
        const { lightId, x, y } = event.detail;
        updatePositionOnServer(lightId, x, y);
      });

      // Handle color change
      lightComponent.addEventListener("color-change", (event) => {
        const { lightId, color } = event.detail;
        sendColorToServer(lightId, color);
      });

      // Example: Add a click event listener to the light-component
      lightComponent.addEventListener("click", () => {
        console.log(`Light component clicked! ID: ${lightComponent.lightId}`);
      });
    }

    // Iterate over the JSON data and create light components
    for (const key in lightData) {
      if (lightData.hasOwnProperty(key)) {
        const light = lightData[key];
        createLightComponent(light, key); // Pass the backend ID
      }
    }

    // Function to send the updated position to the server via a PATCH request
    async function updatePositionOnServer(componentId, x, y) {
      try {
        const response = await fetch(`/light/${componentId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ x, y }),
        });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        console.log(
          `Updated position for component ${componentId}: x=${x}, y=${y}`,
        );
      } catch (error) {
        console.error("Error updating position on server:", error);
      }
    }

    // Function to send the selected color to the server via WebSocket
    function sendColorToServer(componentId, color) {
      const websocket = getWebSocket();
      const message = JSON.stringify({
        componentId,
        color: color,
      });

      if (websocket.readyState === WebSocket.OPEN) {
        websocket.send(message);
        console.log("Sent color to server:", message);
      } else {
        console.warn("WebSocket is not open. Unable to send color.");
      }
    }
  } catch (error) {
    console.error("Error fetching light data:", error);
  }
});