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


const VFlowContainer = Component.fromClass(Godot.VFlowContainer)
const Label = Component.fromClass(Godot.Label)
const TextEdit = Component.fromClass(Godot.TextEdit)
const Button = Component.fromClass(Godot.Button)

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

    const buttonRef = Button.useRef()
    Component.useSignal(buttonRef, "pressed", () => {
        console.log("Pressed!")
    })
    const [buttonPressed] = Component.useSignalValues(buttonRef, "toggled", [false])


    return (
        <VFlowContainer
            name="Root"
        >
            <Label
                name="Label"
                text={buttonPressed ? "The button is pressed" : "The button is not pressed"}
            />

            <TextEdit
                name="TextEdit"
                text={text}
                custom_minimum_size={new Vector2(200, 35)}
                text_changed={function(this) {
                    setText(this.text)
                }}
            />

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