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);
});

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);
  }
});

randomizeTargetColor();

const addMetricForm = (legendText, initialKind, initialMetric) => {
  const metricKind = U.obs(initialKind);
  let metric;

  U.template("metric-select-template", ({ form, legend }) => {
    legend.innerText = legendText;
    form.elements[initialKind].disabled = false;
    // form.elements.sortMetric = form.elements[initialKind].value = initialMetric;
    form.elements.metricKind.value = initialKind;

    U.reactive(() => {
      form.elements.whole.disabled = metricKind.value !== "whole";
      form.elements.mean.disabled = metricKind.value !== "mean";
      form.elements.statistic.disabled = metricKind.value !== "statistic";
      // metric.value = form.elements[metricKindObs.value].value;
    });

    const metrics = U.obs([
      U.field(form.elements.whole),
      U.field(form.elements.mean),
      U.field(form.elements.statistic),
    ]);

    U.form(form, {
      onChange: {
        metricKind(kind) {
          metricKind.value = kind;
        },
      },
    });

    metric = U.obs(() => {
      const [whole, mean, statistic] = metrics.value;
      return { whole, mean, statistic }[metricKind.value];
    });

    return "sidebar";
  });

  return metric;
};

const sortMetric = addMetricForm("Sort Metric", "whole", "alpha");
const clusterMetric = addMetricForm("Cluster Metric", "statistic", "importance");