import Godot, { Vector2 } from "godot"
import { useState } from "react"
import { CenterContainer, CheckBox, HBoxContainer, Label, VBoxContainer } from "../components"


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

    return (
        <CenterContainer
            anchors_preset={Godot.Control.LayoutPreset.PRESET_FULL_RECT}
        >
            <VBoxContainer>
                <HBoxContainer>
                    <CheckBox
                        button_pressed={show}
                        toggled={setShow}
                    />

                    <Label text="Show" />
                </HBoxContainer>

                {show &&
                    <Label
                        anchors_preset={Godot.Control.LayoutPreset.PRESET_CENTER}
                        text="Hello World!"
                        ready={async function(this) {
                            // If the Control node is a child of a [Container] node, the scale will be reset to Vector2(1, 1) when the scene is instantiated.
                            // To set the Control's scale when it's instantiated, wait for one frame using await get_tree().process_frame then set its [member scale] property.
                            await this.get_tree().process_frame.as_promise()

                            this.scale = new Vector2(0, 0)
                            const tween = this.create_tween()
                            tween.tween_property(this, "scale", new Godot.Vector2(1, 1), 2)
                            tween.tween_callback(Godot.Callable.create(() => console.log("Tween done!")))

                            // await tween.finished.as_promise()
                            // console.log("Tween done!")
                        }}
                    />
                }
            </VBoxContainer>
        </CenterContainer>
    )
}