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


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

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

local reported = false
function Canary:build()
    if not reported then
        self:traverseUp(function(element)
            print(element.type)
            return true
        end)
        reported = true
    end

    return Placeholder:new {}
end

--- 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 = Canary: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

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