import { Dialog } from "./dialog.mjs";
import { findAnchorOrFail, findButtonOrFail, findDialogOrFail, findImageOrFail, findSpanOrFail } from "./dom.mjs";

const openButton = findAnchorOrFail(document.body, "#aboutLink");
const dialog = findDialogOrFail(document.body, "#about")
const versionParagraph = findSpanOrFail(dialog, "#version");
const charlotteImage = findImageOrFail(dialog, "#charlotteAvatar");
const kioImage = findImageOrFail(dialog, "#kioAvatar");
const closeButton = findButtonOrFail(dialog, ".close");

const aboutDialog = new Dialog(dialog);

openButton.addEventListener("click", e => aboutDialog.open());
closeButton.addEventListener("click", e => aboutDialog.close());

populateVersion();
populateUsers();

async function populateVersion() {
    versionParagraph.innerText = await fetch("/api/about/version").then(r => r.text());
}

async function populateUsers() {
    const { charlotte, kio } = await fetch("/api/about/nekomata_avatars").then(r => r.json());
    if (charlotte) charlotteImage.src = charlotte;
    if (kio) kioImage.src = kio;
}