import { h, g, x, r, t, u } from "./xeact.js";
import { div, span, h2, ahref, br } from "./xeact-html.js";

let li = (b) => h("li", {}, b);
let ul = (b) => h("ul", {}, b);
let code = (b) => h("code", {}, b);

let getWhois = async() => {
    let resp = await fetch(u("/api/whois"));
    resp = await resp.json();
    return resp;
};

let getQueries = async() => {
    let resp = await fetch(u("/api/queries/get"));
    resp = await resp.json();
    resp = resp.map((q) => li(span({}, [t(q.name), t(" "), code(q.query), t(" "), t(`added by ${q.who}`)])));
    return resp;
};

let queryForm = () => {
    return div({}, [
        h2("SQL Query"),
        ahref("/schema.sql", "Schema"),
        h("form", {action: "", autocorrect: "off", autocapitalize: "none", style: "display:flex"}, [
            h("input", {type: "search", style: "width:100%"}),
            h("button", {type: "submit"}, t("👀"))
        ]),
    ]);
};

let mainUI = async () => {
    let root = g("appRoot");
    x(root);

    let whois = await getWhois();
    let queries = await getQueries();

    let qf = queryForm();

    root.appendChild(div({}, [
        t(`Hello, ${whois.UserProfile.DisplayName}.`),
        qf,
        h2("Results"),
        h2("Fun Queries to Try"),
        div({}, queries),
    ]));
};

mainUI();