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


const HFlowContainer = Component.make(Godot.HFlowContainer)
const VFlowContainer = Component.make(Godot.VFlowContainer)
const Label = Component.make(Godot.Label)
const CheckBox = Component.make(Godot.CheckBox)

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

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


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

            {show &&
                <Label text="Shown" />
            }
        </VFlowContainer>
    )
}