import { e } from "./helper.ts"

interface PendingBang {
    bang: string,
    name: string,
    url: string,
    email?: string,
}

async function send_verdict(user: string, pw: string, b: PendingBang,
    accept: boolean, info_block: HTMLDivElement) {
    const err = await fetch(accept ? "acceptBang" : "rejectBang", {
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Basic " + btoa(`${user}:${pw}`),
        },
        method: "POST",
        body: JSON.stringify(b)
    }).then(_ => null).catch(e => "" + e)

    if (err)
        info_block.appendChild(e("p", { class: "verdict-error" }, "Something went wrong: " + err))
    else
        info_block.remove()
    // TODO in the accept case, we should try invalidating the browser cache
    // for ./bangs.json. My idea is to make a HEAD request to let the browser
    // see that the etag has changed; idk of that works
}

export async function try_load_admin_panel(user: string, pw: string) {
    const r = await fetch("pendingBangs", {
        headers: {
            Accept: "application/json",
            Authorization: "Basic " + btoa(`${user}:${pw}`),
        }
    })
    if (!r.ok)
        throw (await r.json()).message

    const pending = await r.json() as PendingBang[]

    // it doesn't make sense to use a special url for the admin panel, as reloading
    // the page logs the user out anyway
    //@ts-ignore HTMLCollectionOf is an iterator
    for (const e of [...document.getElementsByTagName("section")]) e.remove()

    document.body.appendChild(e("section", {}, ...pending.map(b => {
        const btn_accept = e("button", { class: "pending-accept" }, "Accept")
        const btn_reject = e("button", { class: "pending-reject" }, "Reject")

        const r = e("div", { class: "pending-block" },
            e("span", { class: "pending-info" },
                e("p", { class: "pending-bang" }, "!" + b.bang),
                e("p", { class: "pending-name" }, b.name),
                e("p", { class: "pending-url" }, b.url),
                ...(b.email ? [e("p", { class: "pending-email" }, b.email)] : [])
            ),
            btn_accept,
            btn_reject,
        )

        btn_accept.addEventListener("click", () => send_verdict(user, pw, b, true, r))
        btn_reject.addEventListener("click", () => send_verdict(user, pw, b, false, r))

        return r
    })))
}