document.addEventListener("DOMContentLoaded", function () {
  const shadowControlsContainer = document.getElementById(
    "shadowControlsContainer"
  );
  const addShadowButton = document.getElementById("addShadow");
  const shadowElement = document.querySelector(".shadow-element");
  const cssDisplayElement = document.getElementById("cssDisplay");

  function createShadowControls() {
    const div = document.createElement("div");
    div.classList.add("shadow-controls");
    div.innerHTML = `
      <label>Offset X: <input type="range" class="offsetX" min="-50" max="50" value="0" step="1"> <span class="offsetXValue">0px</span></label><br>
      <label>Offset Y: <input type="range" class="offsetY" min="-50" max="50" value="0" step="1"> <span class="offsetYValue">0px</span></label><br>
      <label>Blur Radius: <input type="range" class="blurRadius" min="0" max="30" value="0" step="0.5"> <span class="blurRadiusValue">0px</span></label><br>
      <label>Shadow Color: <input type="color" class="shadowColor" value="#000000"></label><br>
      <label>Shadow Opacity: <input type="range" class="shadowOpacity" min="0" max="1" step="0.01" value=".25"> <span class="shadowOpacityValue">1</span></label><br>
      <button type="button" class="removeShadow">Remove</button>
    `;
    shadowControlsContainer.appendChild(div);

    div.querySelector(".removeShadow").addEventListener("click", function () {
      removeShadowControl(div);
    });

    const sliders = div.querySelectorAll(
      "input[type=range], input[type=color]"
    );
    sliders.forEach((slider) =>
      slider.addEventListener("input", () => updateShadows())
    );
  }

  function removeShadowControl(div) {
    shadowControlsContainer.removeChild(div);
    updateShadows();
  }

  function updateShadows() {
    const allShadows = Array.from(shadowControlsContainer.children).map(
      (control) => {
        const offsetX = control.querySelector(".offsetX").value;
        const offsetY = control.querySelector(".offsetY").value;
        const blurRadius = control.querySelector(".blurRadius").value;
        const shadowColor = control.querySelector(".shadowColor").value;
        const shadowOpacity = control.querySelector(".shadowOpacity").value;

        control.querySelector(".offsetXValue").textContent = `${offsetX}px`;
        control.querySelector(".offsetYValue").textContent = `${offsetY}px`;
        control.querySelector(
          ".blurRadiusValue"
        ).textContent = `${blurRadius}px`;
        control.querySelector(
          ".shadowOpacityValue"
        ).textContent = shadowOpacity;

        return `${offsetX}px ${offsetY}px ${blurRadius}px rgba(${hexToRGBA(
          shadowColor,
          shadowOpacity
        )})`;
      }
    );

    shadowElement.style.textShadow = allShadows.join(", ");
    cssDisplayElement.textContent = `text-shadow: ${allShadows.join(", ")};`;
  }

  function hexToRGBA(hex, opacity) {
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);
    return `${r}, ${g}, ${b}, ${opacity}`;
  }

  addShadowButton.addEventListener("click", createShadowControls);

  createShadowControls(); // Create the initial set of controls
});