const selectors = {
  get sortControl() {
    return document.forms.sortControl.elements;
  },
  get clusterControl() {
    return document.forms.clusterControl.elements;
  },
};

const onMetricChange = (elements) => {
  elements.sortOrderLabel.value = elements.sortOrder.checked
    ? "Maximizing"
    : "Minimizing";
  const kind = elements.metricKind.value;
  elements.whole.disabled = kind !== "whole";
  elements.mean.disabled = kind !== "mean";
  elements.statistic.disabled = kind !== "statistic";
  elements.sortMetric.value = elements[kind].value;

  sortImages();
  showResults(selectors.sortControl.resultsToDisplay.value);
};

const onColorChange = (inputValue) => {
  console.log(inputValue);
  const colorInput = "#" + (inputValue?.replace("#", "") ?? "FFFFFF");

  if (colorInput.length !== 7) {
    return;
  }

  const rgb = d3.color(colorInput);
  if (!rgb) {
    return;
  }

  const refomatted = rgb.formatHex();
  selectors.sortControl.colorText.value = refomatted;
  selectors.sortControl.colorPicker.value = refomatted;

  scoreImages();
  sortImages();
  showResults(selectors.sortControl.resultsToDisplay.value);
};

const scoreImages = () => {
  // TODO
};

const sortImages = () => {
  // TODO
};

const showResults = (resultsToDisplay) => {
  // TODO
};

window.onload = () => {
  const metricTemplate = document.getElementById("metric-form-template").content;

  selectors.sortControl.metric.appendChild(metricTemplate.cloneNode(true));
  selectors.sortControl.metricKind.value = "whole";
  selectors.sortControl.whole.value = "alpha";
  onMetricChange(selectors.sortControl);

  selectors.clusterControl.metric.appendChild(metricTemplate.cloneNode(true));
  selectors.clusterControl.sortOrder.checked = true;
  selectors.clusterControl.metricKind.value = "statistic";
  selectors.clusterControl.statistic.value = "importance";
  onMetricChange(selectors.clusterControl);
};