const player = await system.call("launcher::profile")
const buttons = document.querySelectorAll("button[frame]")
const dynmapFrame = document.querySelector("article.frame.dynmap > iframe") 

const skinViewer = new skinview3d.SkinViewer({
    canvas: document.getElementById("skin"),
    width: 390,
    height: 490,
    skin: "assets/img/debug_skin.png"
})

skinViewer.animation = new skinview3d.IdleAnimation()
skinViewer.animation.speed = 1

function setActiveButton(frameIdentifier) {
    for (const button of buttons) {
        button.classList.remove("active")
        if (button.getAttribute("frame") == frameIdentifier) {
            button.classList.add("active")
        }
    }
}

function fixedTo(number, n) {
    const k = Math.pow(10, n)
    const result = (Math.round(number * k) / k)
    return Number.isInteger(result) ? result.toFixed(2) : result
}

function flattenSettings(obj, prefix = "") {
    return Object.keys(obj).reduce((acc, k) => {
        const pre = prefix.length ? prefix + ".": "";
        if (typeof obj[k] === "object" && obj[k] !== null && !Array.isArray(obj[k])) {
            Object.assign(acc, flattenSettings(obj[k], pre + k));
        } else {
            acc[pre + k] = obj[k];
        }
        return acc;
    }, {});
}

window.setting = {}

window.setting.set = async function settingSet(key, value) {
    console.log(key, value)
    await system.call("settings::set", { key, value })
}

window.showPage = function showPage(frameIdentifier) {
    showFrame(frameIdentifier)
    setActiveButton(frameIdentifier)
}

window.initDynmap = async function initDynmap() {
    const dynampUrl = await system.call("lentia::dynamp") || "http://azures.fr:8123/"
    if (dynmapFrame.src != dynampUrl) {
        dynmapFrame.src = dynampUrl
    }
}

window.getRamInformation = async function getRamInformation() {
    const $ram = await system.call("hardware::ram")
    ram.setAttribute("max", Math.floor($ram.freeGb * 1024))
    freeRam.innerText = `${$ram.totalGb} Gb`
    totalRam.innerText = `${$ram.freeGb} Gb`
}

window.handleSettingsChanges = async function handleSettingsChanges(key, value) {
    const span = document.querySelector(`span#${key.includes("ram") ? "currentRam" : key}`)
    setting.set(key, value)
    if (span) {
        span.innerText = key.includes("ram") ? fixedTo(value / 1024, 2) + " G" : value
    }
}

window.initSettings = async function initSettings() {
    const settings = await system.call("settings::read")
    ram.value = settings.ram.max
    javaPath.value = settings.javaPath
    currentRam.innerText =  fixedTo(settings.ram.max / 1024, 2) + " G"
    getRamInformation()
}

window.initSkin = async function initSkin() {
    const container = document.querySelector(".skinview3d")
    
    if (container.clientWidth === 0 || container.clientHeight === 0) {
        requestAnimationFrame(initSkin)
        return
    }

    const skinViewer = new skinview3d.SkinViewer({
        canvas: document.getElementById("skin"),
        width: container.clientWidth,
        height: container.clientHeight,
        skin: "assets/img/debug_skin.png"
    })

    const ro = new ResizeObserver(() => {
        skinViewer.width = container.clientWidth
        skinViewer.height = container.clientHeight
    })

    skinViewer.animation = new skinview3d.IdleAnimation()
    window.skinViewer = skinViewer

    ro.observe(container)
}

initSkin()
initSettings()
showFrame("profile")