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

class Select {
  constructor(label, options)
  {
    const parent = controlGrid;

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

    const selectE = document.createElement("select");
    selectE.className = "span-2";

    for (let i = 0; i < options.length; i++) {
      const option = options[i];
      const optionE = document.createElement("option");
      optionE.setAttribute("value", i);
      optionE.innerHTML = option;
      selectE.appendChild(optionE);
    }

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

    rowE.appendChild(labelE);
    rowE.appendChild(selectE);

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

    this.select = selectE;
    this.options = options;

    this.lastValue = undefined;

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

    this.update();
  }

  update()
  {
    const rawValue = parseInt(this.select.value);
    if (rawValue !== this.lastValue) {
      this.lastValue = rawValue;
      localStorage.setItem(this.label, rawValue);
    }
    return rawValue;
  }
};

export { Select };