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. To use it:
        `),
        e("ul", {},
            e("li", {}, "Select a fallback search engine, used when a search doesn't contain a bang"),
            e("li", {}, "Add this search engine to your browser, or bookmark this page"),
        ),
        e("span", {}, "Can't find a search engine? "), e("a", { href: "#~submit" }, "Propose or change a bang."),
    )
}

export function section_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 listing = e("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 searchResults = e("ul", {class: "dropdown"})

    const input = e("input", {type: "text"})
    input.addEventListener("keydown", ev => {
        if (ev.code == "Enter") select(input.value)
    })
    input.addEventListener("keyup", _ => {
        setSearchResults(searchResults, input)
    })

    const submit = e("button", {}, "Select")
    submit.addEventListener("click", () => select(input.value))

    const inputLi = e("li", {id: "select-engine-li"},
        e("label", {}, "Select other engine by bang:"),
        input,
        submit,
        searchResults
    )

    listing.append(inputLi)

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

function setSearchResults(ul, input) {
    bangs.then(bangs => {
        ul.innerHTML = ""

        let results = bangs[input.value] ? [bangs[input.value]] : []

        if (results.length === 0)
            ul.style.display = "none"
        else {
            ul.style.display = "flex"
            for (const r of results) {
                const li = e("li", {},
                    e("p", {class: "name"}, r.name),
                    e("p", {class: "bang"}, "TODO"))
                li.addEventListener("click", () => {
                    input.value = "TODO"
                })
                ul.appendChild(li)
            }
            console.log(ul)
        }
    })
}