local ScreenArea = require "lib.simple_ui.screen_area"
local Center = require "lib.simple_ui.center"
local Placeholder = require "lib.simple_ui.placeholder"
local Padding = require "lib.simple_ui.padding"
local Builder = require "lib.simple_ui.builder"
local Flex = require "lib.simple_ui.flex"
local SizedBox = require "lib.simple_ui.sized_box"
local SingleChildElement = require "lib.simple_ui.single_child_element"


local MyWidget = setmetatable({}, SingleChildElement)
MyWidget.__index = MyWidget

--- comment
--- @return Flex
function MyWidget:build()
    return Flex:new {
        key = "my_flex",
        direction = "vertical",
        mainAxisSize = "max",
        children = {
            Padding:new {
                top = 8,
                child = Flex:new {
                    key = "inner_flex",
                    mainAxisAlignment = "start",
                    mainAxisSize = "min",
                    children = {
                        SizedBox:new {
                            width = 100,
                            height = 100,
                            child = Placeholder:new {}
                        },
                        SizedBox:new {
                            width = 150,
                            height = 200,
                            child = Placeholder:new {}
                        },
                        SizedBox:new {
                            width = 100,
                            height = 100,
                            child = Placeholder:new {}
                        },
                    },
                }
            },
            Flex:new {
                key = "inner_flex2",
                mainAxisAlignment = "center",
                children = {
                    SizedBox:new {
                        width = 100,
                        height = 100,
                        child = Placeholder:new {}
                    },

                    SizedBox:new {
                        width = 100,
                        height = 100,
                        child = Placeholder:new {}
                    },
                },

            },
        }
    }
end

-- function MyWidget:layout()
--     if not self.child then return end
--     self.child.constraints = self.constraints
--     self.child:layout()
-- end

return Builder {
    elementTree = ScreenArea:new {
        child = MyWidget:new {}
    }
}