(function () {
  "use strict";

  function renderPresets(container, presets, onApply, onDelete) {
    container.innerHTML = "";
    for (var i = 0; i < presets.length; i++) {
      (function (index) {
        var p = presets[index];
        var badge = document.createElement("span");
        badge.className = "rt-preset-badge";
        badge.style.background = p.bg;
        badge.style.borderColor = p.border;
        badge.style.color = p.text;
        badge.textContent = "Aa";
        badge.title = "Click to apply";
        badge.addEventListener("click", function () {
          onApply(p);
        });

        var del = document.createElement("span");
        del.className = "rt-preset-delete";
        del.textContent = "\u00d7";
        del.addEventListener("click", function (e) {
          e.stopPropagation();
          onDelete(index);
        });
        badge.appendChild(del);
        container.appendChild(badge);
      })(i);
    }
  }

  async function savePreset(preset, onDone) {
    var settings = await window.RedditTweaks.loadSettings();
    var presets = settings.colorPresets || [];
    presets.push(preset);
    settings.colorPresets = presets;
    await window.RedditTweaks.saveSettings(settings);
    onDone(presets);
  }

  async function deletePreset(index, onDone) {
    var settings = await window.RedditTweaks.loadSettings();
    var presets = settings.colorPresets || [];
    presets.splice(index, 1);
    settings.colorPresets = presets;
    await window.RedditTweaks.saveSettings(settings);
    onDone(presets);
  }

  window.RedditTweaks = window.RedditTweaks || {};
  window.RedditTweaks.presets = {
    render: renderPresets,
    save: savePreset,
    delete: deletePreset,
  };
})();