////
// The scrollback shows your history of interacting with the shell.
// input, output, etc

import { scrollback, $$ } from "./dom.js"

type InputStatus = "waiting" | "streaming" | "ok" | "error"

export function addInput(id: string, input: string) {
    const parent = $$("li.input")
    const status = $$("span.status.yellow", "•")
    const content = $$("span.content", input)
    parent.append(status, content)
    parent.dataset.id = id

    scrollback.append(parent)
}

export function setStatus(id: string, status: InputStatus) {
    const statusEl = document.querySelector(`[data-id="${id}"].input .status`)
    if (!statusEl) return

    statusEl.className = ""

    switch (status) {
        case "waiting":
            statusEl.classList.add("yellow")
            break
        case "streaming":
            statusEl.classList.add("purple")
            break
        case "ok":
            statusEl.classList.add("green")
            break
        case "error":
            statusEl.classList.add("red")
            break
    }
}

export function addOutput(id: string, output: string) {
    const item = $$("li", output)
    item.classList.add("output")
    item.dataset.id = id

    scrollback.append(item)
    autoScroll()
}

export function autoScroll() {
    setTimeout(() => {
        requestAnimationFrame(() => scrollback.scrollTop = scrollback.scrollHeight)
    }, 10)
}