import { login as apiLogin, setBackendUrl } from "../api.js";
import { initRouter } from "./router.js";
import { setBgColor, setMainColor, setBorderColor } from "./utils.js";

export async function loadLogin() {
  const app = document.getElementById("app");
  app.innerHTML = "";
  const loginHtml = await fetch("pages/login.html").then((res) => res.text());
  app.insertAdjacentHTML("beforeend", loginHtml);

  const form = document.getElementById("login-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    try {
      const data = await apiLogin(username, password);
      localStorage.setItem("token", data.access_token);
      initRouter();
    } catch (err) {
      document.getElementById("error").textContent = "ERROR: Invalid login";
    }
  });

  // Settings
  const settingsBtn = document.getElementById("settings-btn");
  settingsBtn.addEventListener("click", () => {
    const settings = document.getElementById("settings-form");
    settings.style.display =
      settings.style.display === "none" ? "block" : "none";
  });

  const colorInput = document.getElementById("main-color");
  colorInput.value = localStorage.getItem("mainColor") || "#0f0";
  colorInput.addEventListener("change", (e) => {
    setMainColor(e.target.value);
  });
  const colorBorderInput = document.getElementById("border-color");
  colorBorderInput.value = localStorage.getItem("borderColor") || "#0f0";
  colorBorderInput.addEventListener("change", (e) => {
    setBorderColor(e.target.value);
  });
  const colorBgInput = document.getElementById("bg-color");
  colorBgInput.value = localStorage.getItem("bgColor") || "#000";
  colorBgInput.addEventListener("change", (e) => {
    setBgColor(e.target.value);
  });

  const backendInput = document.getElementById("backend-url");
  backendInput.value =
    localStorage.getItem("backendUrl") || "http://localhost:8000";
  backendInput.addEventListener("change", (e) => {
    setBackendUrl(e.target.value);
  });
}