import { e } from "./helper.ts";
import { bangs } from "./query.ts";
import { status } from "./ui.ts"

export function section_info_start() {
    return e("section", { class: "info" },
        e("h1", {}, "Fastbangs"),
        e("p", {}, `
            This application provides a way to (mostly) locally handle search bangs.
            First select a default engine to use, then register this page as a search in your browser
        `),
        e("a", { href: "#~submit" }, "Propose or change a bang"),
    )
}

export function section_engine_select() {
    const section = document.createElement("section")
    section.classList.add("engine-select")

    const select = async (e: string) => {
        const engine = e.toLowerCase();
        if (!(await bangs)[engine]) return status("error", `Engine ${JSON.stringify(e)} does not exist.`)
        window.location.hash = `#${e}`
    }

    const heading = document.createElement("h2")
    heading.textContent = "Select a search engine"

    const listing = document.createElement("ul")
    bangs.then(bangs => {
        for (const key in bangs) if (bangs[key]!.pinned) {
            listing.prepend(e("li", { class: "pinned", onclick: () => select(key) }, bangs[key]!.name ?? key))
        }
    })

    const input = document.createElement("input")
    input.type = "input"
    input.addEventListener("keydown", ev => {
        if (ev.code == "Enter") select(input.value)
    })

    const submit = document.createElement("button")
    submit.textContent = "Select"
    submit.addEventListener("click", () => select(input.value))

    listing.append(e("li", {},
        e("label", {}, "Select other engine by bang:"),
        input,
        submit
    ))

    section.append(heading, listing)
    return e("section", { class: "engine-select" },
        e("h2", {}, "Select a search engine"),
        listing
    )
}