const controlMain = document.getElementById("control-main");

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

const sliderDefaults = {"bone length":"32","velocity acc.":"385","velocity damp.":"796","bone count":"40"};

class Slider {
  constructor(label, low, high, max = 1024)
  {
    const labelE = document.createElement("span");
    labelE.className = "label";
    labelE.innerHTML = label;

    const valueE = document.createElement("div");
    valueE.className = "value";

    const inputE = document.createElement("input");
    inputE.className = "range";
    inputE.min = 0;
    inputE.max = max;
    inputE.type = "range";
    const spanE = document.createElement("span");
    spanE.className = "range-span code";

    valueE.appendChild(inputE);
    valueE.appendChild(spanE);

    controlMain.appendChild(labelE);
    controlMain.appendChild(valueE);

    this.label = label;
    this.input = inputE;
    this.span = spanE;
    this.low = low;
    this.high = high;
    this.lastValue = undefined;

    const storageValue = localStorage.getItem(this.label);
    if (storageValue !== null) {
      this.input.value = storageValue;
    } else if (this.label in sliderDefaults) {
      this.input.value = sliderDefaults[this.label];
    }

    this.update();
  }

  update()
  {
    const rawValue = parseInt(this.input.value);
    const value = remap(this.input.min, this.input.max, this.low, this.high, this.input.value);
    if (rawValue !== this.lastValue) {
      this.lastValue = rawValue;
      localStorage.setItem(this.label, rawValue);
    }
    if (this.high > 10) {
      this.span.innerHTML = value.toFixed(2);
    } else {
      this.span.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 };