import { render, h } from "preact"
import { useState } from "preact/hooks"
import { KeyCode } from "UnityEngine"
import { AttachToPanelEvent, KeyDownEvent, VisualElement } from "UnityEngine/UIElements"

document.addRuntimeUSS(`
    #wrapper {
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 80%;
        height: 80%;
        background-color: gold;
        border-radius: 10px;
    }
    #modal {
        width: 600px;
        height: 300px;
        position: absolute;
        background-color: maroon;
        top: 10px;
        padding: 20px;
        color: white;
        align-items: center;
        display: none;
    }
`)

const App = () => {
    const [showModal, setShowModal] = useState(false)

    const onAttachToPanel = (e: AttachToPanelEvent) => {
        (e.target as VisualElement).Focus()
    }

    const onKeyDown = (e: KeyDownEvent) => {
        if (e.keyCode == KeyCode.Space) {
            setShowModal(!showModal)
        }
    }

    // https://forum.unity.com/threads/how-to-get-keydownevent-to-work.863080/#post-5686054
    return <div id="wrapper" class="w-full h-full" focusable={true} onAttachToPanel={onAttachToPanel} onKeyDown={onKeyDown}>
        <div id="content"></div>
        <div id="modal" style={{ display: showModal ? "Flex" : "None" }}>Modal</div>
    </div >
}

render(<App />, document.body)