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 Center = require "lib.simple_ui.elements.center"
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
MyWidget.type = "MyWidget"

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

local reported = false
function Canary:build()
    -- self.i = self.i and self.i + 1 or 0
    -- print(self.i)
    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 = "test",
        direction = "vertical",
        mainAxisSize = "max",
        children = {
            Padding:new {
                top = 8,
                child = Flex:new {
                    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 {
                            key = "mybox",
                            width = 100,
                            height = 100,
                            child = Canary:new {
                                i = 0
                            }
                        },
                    },
                }
            },
            Flex:new {
                key = "inner_flex2",

                mainAxisAlignment = "end",
                children = {
                    SizedBox:new {
                        width = 100,
                        height = 100,
                        child = Placeholder:new {}
                    },

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

            },
        }
    }
end

return Builder {
    builder = function()
        return ScreenArea:new {
            child = MyWidget:new {}
        }
    end
}