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 StatefulElement = require "lib.simple_ui.core.stateful_element"


local MyWidget = setmetatable({}, StatefulElement)
MyWidget.__index = MyWidget
MyWidget.type = "MyWidget"

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

function Canary:initState()
    return { i = self.key == "canary1" and 0 or 100 }
end

function Canary:build()
    self.state.i = self.state.i and self.state.i + 1 or 0

    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 {
                            width = 100,
                            height = 100,
                            child = Canary:new {
                                key = "canary1",
                            }
                        },
                        SizedBox:new {
                            width = 100,
                            height = 100,
                            child = Canary:new {
                                key = "canary2",
                            }
                        },
                    },
                }
            },
            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 {
    debugDraw = true,
    builder = function()
        return ScreenArea:new {
            child = MyWidget:new {}
        }
    end
}