local gfx <const> = playdate.graphics

drawRectanglesSystem = filteredSystem(
    "drawRectangles",
    { position = T.XyPair, drawAsRectangle = { size = T.XyPair } },
    function(e, dt)
        gfx.fillRect(e.position.x, e.position.y, e.drawAsRectangle.size.x, e.drawAsRectangle.size.y)
    end
)

drawSpriteSystem = filteredSystem("drawSprites", { position = T.XyPair, drawAsSprite = T.pd_image }, function(e)
    if e.position.y < Camera.pan.y - 240 or e.position.y > Camera.pan.y + 480 then
        return
    end
    e.drawAsSprite:draw(e.position.x, e.position.y)
end)

local xMargin = 4

drawTextSystem = filteredSystem(
    "drawText",
    { position = T.XyPair, drawAsText = { text = T.str, style = Maybe(T.str), font = Maybe(T.pd_font) } },
    function(e)
        local font = e.drawAsText.font or AshevilleSans14Bold
        local textHeight = font:getHeight()
        local textWidth = font:getTextWidth(e.drawAsText.text)

        local bgLeftEdge = e.position.x - xMargin - textWidth / 2
        local bgTopEdge = e.position.y - 2
        local bgWidth, bgHeight = textWidth + (xMargin * 2), textHeight + 2

        if e.drawAsText.style == TextStyle.Inverted then
            gfx.fillRect(bgLeftEdge, bgTopEdge, textWidth + (xMargin * 2), textHeight + 2)
            gfx.setImageDrawMode(gfx.kDrawModeInverted)
        elseif e.drawAsText.style == TextStyle.Bordered then
            gfx.setColor(gfx.kColorWhite)
            gfx.fillRect(bgLeftEdge, bgTopEdge, bgWidth, bgHeight)

            gfx.setImageDrawMode(gfx.kDrawModeCopy)
            gfx.setColor(gfx.kColorBlack)
            gfx.drawRect(bgLeftEdge, bgTopEdge, bgWidth, bgHeight)
        end

        font:drawTextAligned(e.drawAsText.text, e.position.x, e.position.y, kTextAlignment.center)
        if e.drawAsText.style == TextStyle.Inverted then
            gfx.setImageDrawMode(gfx.kDrawModeCopy)
        end
    end
)