import {
  login,
  register,
  getLinks,
  createLink,
  deleteLink,
  updateLink
} from "./api.js";

const authSection = document.getElementById("authSection");
const linkSection = document.getElementById("linkSection");
const authStatus = document.getElementById("authStatus");
const list = document.getElementById("list");

let token = null;

// ------------------------------
// AUTH
// ------------------------------

function setToken(t) {
  token = t;
  if (token) {
    authSection.style.display = "none";
    linkSection.style.display = "block";
    loadLinks();
  } else {
    authSection.style.display = "block";
    linkSection.style.display = "none";
  }
}

document.getElementById("loginForm").addEventListener("submit", async e => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;

  try {
    const t = await login(email, password);
    setToken(t);
  } catch (err) {
    authStatus.textContent = err.message;
  }
});

document.getElementById("registerForm").addEventListener("submit", async e => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;

  try {
    await register(email, password);
    authStatus.textContent = "Registrato! Ora effettua il login.";
  } catch (err) {
    authStatus.textContent = err.message;
  }
});

// ------------------------------
// LINKS
// ------------------------------

async function loadLinks() {
  const links = await getLinks(token);

  list.innerHTML = links
    .map(
      link => `
      <div class="item">
        ${link.icon ? `<img src="http://192.168.1.3:3000${link.icon}">` : ""}
        <div>
          <strong>${link.name}</strong><br>
          <a href="${link.url}" target="_blank">${link.url}</a>
        </div>
      </div>
    `
    )
    .join("");
}

document.getElementById("linkForm").addEventListener("submit", async e => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const iconFile = formData.get("icon");

  await createLink(token, {
    name: formData.get("name"),
    url: formData.get("url"),
    iconFile: iconFile.size > 0 ? iconFile : null
  });

  e.target.reset();
  loadLinks();
});

// Init
setToken(null);