const controlGrid = document.getElementById("control-parent");

function remap(low1, high1, low2, high2, value)
{
  return low2 + (value - low1) * (high2 - low2) / (high1 - low1);
}

class Slider {
  constructor(label, low, high, max = 1024)
  {
    const parent = controlGrid;

    const labelE = document.createElement("label");
    labelE.innerHTML = label;

    const inputE = document.createElement("input");
    inputE.min = 0;
    inputE.max = max;
    inputE.type = "range";
    const rangeValueE = document.createElement("range-value");
    const codeE = document.createElement("code");
    rangeValueE.appendChild(codeE);

    const rowE = document.createElement("row");

    const sepE = document.createElement("row-separator");

    rowE.appendChild(labelE);
    rowE.appendChild(inputE);
    rowE.appendChild(rangeValueE);

    parent.appendChild(rowE);
    parent.appendChild(sepE);

    this.label = label;
    this.input = inputE;
    this.code = codeE;
    this.low = low;
    this.high = high;
    this.lastValue = undefined;

    const storageValue = localStorage.getItem(this.label);
    if (storageValue !== null) {
      this.input.value = storageValue;
    }

    this.update();
  }

  update()
  {
    const rawValue = parseInt(this.input.value);
    const value = remap(this.input.min, this.input.max, this.low, this.high, rawValue);
    if (rawValue !== this.lastValue) {
      this.lastValue = rawValue;
      localStorage.setItem(this.label, rawValue);
    }
    if (this.high > 10) {
      this.code.innerHTML = value.toFixed(2);
    } else {
      this.code.innerHTML = value.toFixed(4);
    }
    return value;
  }
}

function updateSliders(sliders)
{
  const values = {};
  for (let [key, value] of Object.entries(sliders)) {
    values[key] = value.update();
  }
  return values;
}

export { Slider, updateSliders };