const numSliders = 5;
const defaultMultiplier = 1;

function createSliders() {
  const slidersContainer = document.getElementById("sliders");
  for (let i = 0; i < numSliders; i++) {
    const sliderContainer = document.createElement("div");
    sliderContainer.className = "slider-container";

    const label = document.createElement("label");
    label.textContent = `${(i / (numSliders - 1) * 2).toFixed(2)} zoom units/s`;

    const slider = document.createElement("input");
    slider.type = "range";
    slider.min = "1";
    slider.max = "10";
    slider.step = "0.1";
    slider.value = defaultMultiplier;
    slider.className = "slider";

    const value = document.createElement("span");
    value.className = "value";
    value.textContent = `${defaultMultiplier}x`;

    sliderContainer.appendChild(label);
    sliderContainer.appendChild(slider);
    sliderContainer.appendChild(value);
    slidersContainer.appendChild(sliderContainer);

    slider.addEventListener("input", () => {
      value.textContent = `${parseFloat(slider.value).toFixed(1)}x`;
      saveSettings();
    });
  }
}

function saveSettings() {
  const sliders = document.querySelectorAll(".slider");
  const settings = Array.from(sliders).map((slider) => parseFloat(slider.value));
  chrome.storage.sync.set({ accelerationCurve: settings }, () => {
    sendSettingsToActiveTab(settings);
  });
}

function sendSettingsToActiveTab(settings) {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    if (tabs[0]) {
      chrome.tabs.sendMessage(
        tabs[0].id,
        { action: "updateSettings", settings },
        (response) => {
          if (chrome.runtime.lastError) {
            console.log("Could not send settings to content script.");
          }
        }
      );
    }
  });
}

function loadSettings() {
  chrome.storage.sync.get("accelerationCurve", (data) => {
    if (data.accelerationCurve) {
      const sliders = document.querySelectorAll(".slider");
      data.accelerationCurve.forEach((value, index) => {
        sliders[index].value = value;
        sliders[index].nextElementSibling.textContent = `${value.toFixed(1)}x`;
      });
    }
  });
}

createSliders();
loadSettings();