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

function parseColor(c)
{
  const groups = c.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/i);
  if (groups == null) {
    throw new Error("invalid color", c);
  } else {
    return [parseInt(groups[1], 16), parseInt(groups[2], 16), parseInt(groups[3], 16)];
  }
}

class ColorInput {
  constructor(label, defaultValue)
  {
    const parent = controlGrid;

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

    const inputE = document.createElement("input");
    inputE.type = "color";
    inputE.className = "span-2";

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

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

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

    this.label = label;
    this.input = inputE;

    this.lastValue = undefined;

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

    this.update();
  }

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

export { ColorInput };