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


const CenterContainer = Component.fromClass(Godot.CenterContainer)
const PanelContainer = Component.fromClass(Godot.PanelContainer)
const MarginContainer = Component.fromClass(Godot.MarginContainer)
const VBoxContainer = Component.fromClass(Godot.VBoxContainer)
const Label = Component.fromClass(Godot.Label)
const TextEdit = Component.fromClass(Godot.TextEdit)


/**
 * A form UI where React controls the state
 */
export function ControlledFormRoot() {
    return (
        <CenterContainer
            anchors_preset={Godot.Control.LayoutPreset.PRESET_FULL_RECT}
            ready={function(this) {
                console.log("ready")
            }}
        >
            <PanelContainer>
                <MarginContainer>
                    <VBoxContainer>
                        <CenterContainer
                            anchors_preset={Godot.Control.LayoutPreset.PRESET_FULL_RECT}
                        >
                            <Label text="Register" />
                        </CenterContainer>

                        <TextEdit
                            custom_minimum_size={new Vector2(250, 40)}
                        />
                        <TextEdit
                            custom_minimum_size={new Vector2(250, 40)}
                        />
                    </VBoxContainer>
                </MarginContainer>
            </PanelContainer>
        </CenterContainer>
    )
}
