import { bangs, process_query } from "./query.ts";

export function add_page_content(engine?: string) {
    //@ts-ignore HTMLCollectionOf is an iterator
    for (const e of [...document.getElementsByTagName("section")]) e.remove()
    if (engine) {
        document.body.append(section_search(engine), section_info_search())
    } else {
        document.body.append(section_info_start(), section_engine_select())
    }
}

function section_search(engine: string) {
    const section = document.createElement("section")
    section.classList.add("search")

    if (document.getElementById("search-link")) {
        // <link /> is already present, we need reload because browser wont notice otherwise
        window.location.reload()
    }
    const link = document.createElement("link")
    link.rel = "search"
    link.id = "search-link"
    link.type = "application/opensearchdescription+xml"
    link.href = `/search.xml?default=${encodeURIComponent(engine)}`
    link.title = `Fastbangs (default engine: ${engine})`
    document.head.append(link)

    const heading = document.createElement("h1")
    heading.textContent = engine
    bangs.then(bangs => heading.textContent = bangs[engine]?.name ?? engine)

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

    const submit = document.createElement("button")
    submit.textContent = "Search"
    submit.addEventListener("click", () => {
        process_query(engine, input.value ?? "")
    })

    const search = document.createElement("div")
    search.classList.add("bar")
    search.append(input, submit)

    section.append(heading, search)
    return section
}

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

    const select = async (e: string) => {
        if (!(await bangs)[e]) 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) {
            const li = document.createElement("li")
            li.classList.add("pinned")
            li.textContent = bangs[key]!.name ?? key
            li.onclick = () => select(key)
            listing.prepend(li)
        }
    })
    const other = document.createElement("li")
    const label = document.createElement("label")
    label.textContent = "Select other engine by bang:"
    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))
    other.append(label, input, submit)
    listing.append(other)

    section.append(heading, listing)
    return section
}

function section_info_search() {
    const section = document.createElement("section")
    section.classList.add("info")

    const heading = document.createElement("h2")
    heading.textContent = "Setup"

    const info = document.createElement("p")
    info.textContent = `To install this as the default search engine, select "Add Fastbangs" in the context-menu of the URL-bar.`

    section.append(heading, info)
    return section
}

function section_info_start() {
    const section = document.createElement("section")
    section.classList.add("info")

    const heading = document.createElement("h1")
    heading.textContent = "Fastbangs"

    const info = document.createElement("p")
    info.textContent = `
        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
    `
    section.append(heading, info)
    return section
}

let status_el: HTMLElement
export function status(level: "error" | "info" | "success", text: string) {
    if (!status_el) {
        status_el = document.createElement("p")
        document.body.append(status_el)
    }
    status_el.textContent = text
    status_el.classList.value = ""
    status_el.classList.add("status", `level-${level}`)
}