import { Dom } from "OneJS/Dom"
import { h, render } from "preact"
import { useEffect, useRef, useState } from "preact/hooks"
import { Color, ScriptableObject, Vector2 } from "UnityEngine"
import { Background, Painter2D, StyleBackground, VectorImage } from "UnityEngine/UIElements"

const axeImage = resource.loadImage("Images/wooden_axe.png")

const SomeShape = ({ overflow }) => {
    const ref = useRef<Dom>()

    useEffect(() => {
        var v = ScriptableObject.CreateInstance(VectorImage)
        var p = new Painter2D()
        paint(p)
        p.SaveToVectorImage(v)
        ref.current.ve.style.backgroundImage = new StyleBackground(Background.FromVectorImage(v))
    }, [])

    function paint(paint2D: Painter2D) {
        paint2D.strokeColor = Color.white
        paint2D.fillColor = Color.white
        paint2D.lineWidth = 10;
        paint2D.BeginPath()
        paint2D.MoveTo(new Vector2(0, 160))
        paint2D.LineTo(new Vector2(100, 0))
        paint2D.LineTo(new Vector2(200, 160))
        paint2D.ClosePath()
        paint2D.Fill()
    }

    return <div ref={ref} style={{ width: 200, height: 200, overflow: overflow ? "Hidden" : "Visible" }}>
        <image class="w-full h-full" image={axeImage} />
    </div>
}

const App = () => {
    const [overflow, setOverflow] = useState(false)

    return <div class="w-full h-full flex justify-center items-center">
        <SomeShape overflow={overflow} />
        <button onClick={() => setOverflow(!overflow)} text="Toggle" />
    </div>
}

render(<App />, document.body)