const targetColor = U.obs();
const randomizeTargetColor = () => {
  targetColor.value = d3
    .hsl(Math.random() * 360, Math.random(), Math.random())
    .formatHex();
};

U.element("colorSelect", ({ randomButton }, form) => {
  U.field(form.elements.colorText, { obs: targetColor });
  U.field(form.elements.colorPicker, { obs: targetColor });
  U.form(form);
  randomButton.addEventListener("click", randomizeTargetColor);
});

randomizeTargetColor();

targetColor.subscribe((hex, { previous }) => {
  const style = document.querySelector(":root").style;
  style.setProperty("--background", hex);
  style.setProperty("--highlight", getContrastingTextColor(hex));

  if (previous) {
    const prevButton = document.createElement("button");
    prevButton.innerText = previous;
    const { h, s, l } = d3.hsl(previous);
    prevButton.style = `
      color: ${getContrastingTextColor(previous)}; 
      --button-bg: ${previous};
      --button-bg-hover: ${d3.hsl(h, s, clamp(0.25, l * 1.25, 0.9)).formatHex()};
    `;
    prevButton.addEventListener("click", () => (targetColor.value = previous));
    document.getElementById("prevColors").prepend(prevButton);
  }
});