import { loadSettings, saveSettings } from "../shared/settings";
import type { FilterMode, Settings } from "../shared/types";
import "./style.css";

const form = document.querySelector<HTMLFormElement>("#settings");
const threshold = document.querySelector<HTMLInputElement>("#threshold");
const thresholdValue = document.querySelector<HTMLElement>("#threshold-value");
const mode = document.querySelector<HTMLSelectElement>("#filter-mode");
const showScore = document.querySelector<HTMLInputElement>("#show-score");
const status = document.querySelector<HTMLElement>("#status");

void loadSettings().then((settings) => {
  threshold!.value = String(settings.threshold);
  mode!.value = settings.filterMode;
  showScore!.checked = settings.showScore;
  for (const site of ["reddit", "twitter", "facebook"] as const) document.querySelector<HTMLInputElement>(`#site-${site}`)!.checked = settings.enabledSites[site];
  updateThresholdLabel();
});

threshold?.addEventListener("input", updateThresholdLabel);
form?.addEventListener("submit", async (event) => {
  event.preventDefault();
  const settings: Partial<Settings> = {
    threshold: Number(threshold?.value), filterMode: mode?.value as FilterMode, showScore: showScore?.checked,
    enabledSites: {
      reddit: document.querySelector<HTMLInputElement>("#site-reddit")!.checked,
      twitter: document.querySelector<HTMLInputElement>("#site-twitter")!.checked,
      facebook: document.querySelector<HTMLInputElement>("#site-facebook")!.checked
    }
  };
  await saveSettings(settings);
  if (status) { status.textContent = "Saved"; setTimeout(() => { status.textContent = ""; }, 1500); }
});

function updateThresholdLabel(): void {
  if (thresholdValue && threshold) thresholdValue.textContent = `${Math.round(Number(threshold.value) * 100)}%`;
}