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


const HFlowContainer = Component.fromClass(Godot.HFlowContainer)
const VFlowContainer = Component.fromClass(Godot.VFlowContainer)
const Label = Component.fromClass(Godot.Label)
const CheckBox = Component.fromClass(Godot.CheckBox)
const TestUi1FC = Component.fromScene("res://src/TestUi1.tscn")

export function TestUi2Component() {
    const [show, setShow] = useState(false)

    const checkBoxRef = CheckBox.useRef()
    Component.useSignal(checkBoxRef, "toggled", setShow)


    return (
        <HFlowContainer>
            <VFlowContainer>
                <Label text="Show" />
                <CheckBox
                    ref={checkBoxRef}
                    button_pressed={show}
                />
            </VFlowContainer>

            {show && <TestUi1FC />}
        </HFlowContainer>
    )
}
