let stylesheet
var audio = new(window.AudioContext)
let jsDiv

let mode
let side
let focusListMain, focusListSecond, focusStart
const focusSelector = "a, d"

const back = document.createElement("a")
back.setAttribute("onclick", "tui.home()")
back.setAttribute("tabindex", "0")
back.className = "back"
back.innerHTML = `⬑Back`

window.addEventListener("load", () => {
    stylesheet = document.styleSheets[0];
    document.documentElement.style.setProperty("--vh", `${window.innerHeight * 0.01}px`)

    document.styleSheets[3].disabled = true // this one is for non-js

    // randomize loading text
    fetch("/assets/loading.txt")
    .then(r => r.text())
    .then(t => Load(t))

    // allow the user to skip on click
    let skipNode = document.createElement("div");
    skipNode.setAttribute("class", "skip-animation");
    skipNode.setAttribute("onclick", "skipAnimation()");
    document.body.appendChild(skipNode);

    // get rid of shit since we have javascript babyyyyyyy
    if (matchMedia("(min-width: 430px) or (min-height: 430px)").matches) {
        for (let node of document.getElementsByClassName("nojs")) {
            node.style.display = "none"
        }
        stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
        stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
        stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
        stylesheet.insertRule(`@media screen and (min-width: 420px) and (max-width: 649px) { .ascii-2 { display: block !important } }`, stylesheet.cssRules.length)
        stylesheet.insertRule(`@media screen and (min-width: 650px) { .ascii-1 { display: block !important } }`, stylesheet.cssRules.length)

        document.querySelectorAll("head style").forEach(style => style.remove());
        jsDiv = document.getElementsByClassName("js")[0]
        tui.home()
    }
});

// skip animations and shit
function skipAnimation() {
    for (let node of document.getElementsByClassName("skip")) {
        const animations = node.getAnimations();
        for (let anim of animations) {
            anim.finish();
        }
    }
    for (let node of document.getElementsByClassName("splash")) {
        const animations = node.getAnimations();
        for (let anim of animations) {
            anim.finish();
        }
    }
    document.getElementsByClassName("skip-animation")[0].remove();
}

// this randomizes the loading messages
function Load (text) {
    const loadArray = text.split("\n")
    const loading = document.getElementsByClassName("loading")[0]

    const r = Math.floor(Math.random() * (loadArray.length-1))
    let loadText = loadArray[r]

    if (loadText === "") {loadText = "You should not be seeing this"}

    loading.children[0].innerHTML = loadText + "."
    loading.children[1].innerHTML = loadText + ".."
    loading.children[2].innerHTML = loadText + "..."
}

// beep!
function beep() {
    var oscillator = audio.createOscillator()

    oscillator.type = "square"
    oscillator.frequency.value = "1200"
    oscillator.connect(audio.destination)
    oscillator.start()

    setTimeout(() => {
        oscillator.stop()
    }, 200)
}

// here are the functions that create every different section
const tui = {
    home: function() {
        mode = "home"
        side = -1
        focusStart = 0

        const div = document.createElement("div")
        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));

        let buttons = document.createElement("div")
        buttons.className = "buttons"
        buttons.innerHTML = `<a onclick="tui.about()" tabindex="0">About</a>
<a onclick="tui.users()" tabindex="0">Users</a>
<a onclick="tui.services()" tabindex="0">Services</a>
<a href="https://linuxposting.xyz/">Linuxposting</a>
<a onclick="beep()" tabindex="0">Beep</a>`
        div.appendChild(buttons)

        const title = document.createElement("span")
        title.className = "title"
        title.innerHTML = "Linuxposting Tilde~"
        div.appendChild(title)
        
        jsDiv.children[0].replaceChildren(div)
        if (jsDiv.children[1]) {jsDiv.children[1].remove()}

        indexFocus()
    },

    about: function() {
        mode = "about"
        side = -1
        focusStart = 1

        const div = document.createElement("div")

        div.appendChild(back)

        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
        div.appendChild(document.getElementById("about").cloneNode(true));

        const title = document.createElement("span")
        title.className = "title"
        title.innerHTML = "About"
        div.appendChild(title)
    
        jsDiv.children[0].replaceChildren(div)
        if (jsDiv.children[1]) {jsDiv.children[1].remove()}

        indexFocus()
    },

    users: function() {
        mode = "users"
        side = 0
        focusStart = 1

        const div = document.createElement("div")

        div.appendChild(back)

        div.appendChild(document.getElementById("users").cloneNode(true));

        const title = document.createElement("span")
        title.className = "title"
        title.innerHTML = "Users"
        div.appendChild(title)

        const div2 = document.createElement("div")

        const title2 = document.createElement("span")
        title2.className = "title2"
        title2.innerHTML = "Description"
        div2.appendChild(document.createElement("div"))
        div2.appendChild(title2)
    
        jsDiv.children[0].replaceChildren(div)
        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
        jsDiv.appendChild(div2)

        indexFocus()
    },

    services: function() {
        mode = "services"
        side = 0
        focusStart = 1

        const div = document.createElement("div")

        div.appendChild(back)

        div.appendChild(document.getElementById("services").cloneNode(true));

        const title = document.createElement("span")
        title.className = "title"
        title.innerHTML = "Services"
        div.appendChild(title)

        const div2 = document.createElement("div")

        const title2 = document.createElement("span")
        title2.className = "title2"
        title2.innerHTML = "Description"
        div2.appendChild(document.createElement("div"))
        div2.appendChild(title2)
    
        jsDiv.children[0].replaceChildren(div)
        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
        jsDiv.appendChild(div2)

        indexFocus()
    },

    // does stuff based on focus changing
    updateFocus: function() {
        const focused = document.activeElement
        const sibling = focused.nextElementSibling
        const credit = document.getElementById("credit")
        const onMainList = (focusListMain.includes(focused))

        // keep track of focus by giving both focused elements the f class
        if (onMainList || focused == credit) {
            for (let el of focusListMain) {
                el.classList.remove("f")
                credit.classList.remove("f")
            }
            focused.classList.add("f")
        }
        
        switch(mode) {
            case "users":
            case "services":
                if (onMainList && sibling && sibling.tagName === "P") {
                    jsDiv.children[1].children[0].replaceChildren(sibling.cloneNode(true))
                } else if (onMainList) {
                    jsDiv.children[1].children[0].innerHTML = ""
                }
                indexFocus()
                break
        }
    }
}

function indexFocus() {
    let focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
    if (jsDiv.children[1]) {
        focusListMain = focusList.filter(el => !jsDiv.children[1].contains(el))
        focusListSecond = focusList.filter(el => jsDiv.children[1].contains(el))
    } else {
        focusListMain = focusList
        focusListSecond = []
    }
    const back = document.getElementsByClassName("back")[0]
    if (back) {back.classList.remove("f")}
}

document.addEventListener("mouseover", (e) => {
    if (!jsDiv) {return}
    if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
        e.target.focus()
        if (side == 0 && focusListSecond.includes(document.activeElement)) {
            side = 1
        } else if (side == 1 && focusListMain.includes(document.activeElement)) {
            side = 0
        }
        tui.updateFocus()
    }
})

document.addEventListener("keydown", (e) => {
    if (!jsDiv) { return }
    let focused = document.activeElement
    if (!focusListMain.includes(focused) && !focusListSecond.includes(focused)) {
        focused = document.getElementsByClassName("f")[0]
    }
    const list = side != 1 ? focusListMain : focusListSecond
    const currentFocus = list.indexOf(focused)
    switch(e.key) {
        case "Escape":
            tui.home()
            break
        case "ArrowRight":
        case "ArrowDown":
            if (list.length > 0) {
                if (currentFocus < list.length - 1) { e.preventDefault() }
                if (side < 1 && currentFocus == -1) {
                    list[focusStart].focus()
                } else {
                    list[Math.min(currentFocus+1, list.length-1)].focus()
                }
                tui.updateFocus()
            }
            break
        case "ArrowLeft":
        case "ArrowUp":
            if (list.length > 0) {
                if (currentFocus > 0) { e.preventDefault() }
                if (side < 1 && currentFocus == -1) {
                    list[focusStart].focus()
                } else {
                    list[Math.max(0, currentFocus-1)].focus()
                }
                tui.updateFocus()
            }
            break
        case "Enter":
        case " ":
            const skipDiv = document.getElementsByClassName("skip-animation")[0]
            if (skipDiv) {
                if (window.getComputedStyle(skipDiv).visibility != "hidden") {skipAnimation()}
                skipDiv.remove()
                return
            }
            focused.click()
            break
        case "Tab":
            e.preventDefault()
            if (side >= 0) {side = (side + 1) % 2}
            if (side == 0) {
                document.getElementsByClassName("f")[0].focus()
            } else if (side == 1 && focusListSecond[0]) {
                focusListSecond[0].focus()
            }
            break

        /* not convinced by this
        case "ArrowLeft":
            e.preventDefault()
            if (side == 1) {
                side = 0
                document.getElementsByClassName("f")[0].focus()
            }
            break
        case "ArrowRight":
            e.preventDefault()
            if (side == 0 && focusListSecond[0]) {
                side = 1
                focusListSecond[0].focus()
            }*/
    }
})

let resizeTimeout = 0
window.addEventListener("resize", () => {
    clearTimeout(resizeTimeout)
    resizeTimeout = setTimeout(() => {
        document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
    }, 200)  
})