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

export function add_page_content(engine?: string) {
    document.getElementById("content")?.remove()
    if (engine) {
        document.body.append(create_search_bar(engine), create_search_info())
    } else {
        document.body.append(create_start_page())
    }
}

function create_search_bar(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 = `Projectname (default engine: ${engine})`
    document.head.append(link)

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

    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 create_search_info() {
    const section = document.createElement("section")
    section.classList.add("info")

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

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

    section.append(heading, info)
    return section
}


function create_start_page() {
    const section = document.createElement("section")
    section.id = "content"

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

    const info = document.createElement("p")
    info.textContent = "This is where one would write what this application does..."

    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}`)
}