import Godot, { Vector2 } from "godot"
import { useState } from "react"
import { Component } from "react-godot-renderer"


const VFlowContainer = Component.make(Godot.VFlowContainer)
const Label = Component.make(Godot.Label)
const TextEdit = Component.make(Godot.TextEdit)
const Button = Component.make(Godot.Button)
const Test = Component.

export function TestUi1Component() {
    const [text, setText] = useState("Default text")

    const textEditRef = TextEdit.useRef()
    Component.useSignal(textEditRef, "text_changed", function(this) {
        setText(this.text)
    })

    const buttonRef = Button.useRef()
    Component.useSignal(buttonRef, "pressed", () => {
        console.log("Pressed!")
    })


    return (
        <VFlowContainer
            name="Root"
            anchor_left={0}
            anchor_top={0}
            anchor_right={0}
            anchor_bottom={0}
        >
            <Label
                name="Label"
                text="This is a label"
            />

            <TextEdit
                ref={textEditRef}
                name="TextEdit"
                text={text}
                custom_minimum_size={new Vector2(200, 35)}
            />

            <Button
                ref={buttonRef}
                name="Button"
                text="Ok"
            />
        </VFlowContainer>
    )
}