--!strict

local ui = require("@rave/ui")
local net = require("@rave/net")
local state = require("@rave/state")
local schema = require("@rave/schema")

local enabled = state.watch("brick-rain/enabled")

local set_enabled = net.event(
    "brick-rain/set-enabled",
    schema.boolean()
)

ui.mount(function()
    return ui.panel {
        align = "top-left",
        width = 220,
        padding = 12,
        gap = 8,
        color = "#101827E8",

        children = {
            ui.text {
                text = "BRICK RAIN",
                font_size = 20,
                color = "#FFFFFF",
            },

            ui.text {
                text = function()
                    return enabled()
                        and "Status: Spawning 20/sec"
                        or "Status: Stopped"
                end,
                color = function()
                    return enabled() and "#58E58C" or "#FF6B6B"
                end,
            },

            ui.button {
                text = function()
                    return enabled()
                        and "Stop spawning"
                        or "Start spawning"
                end,
                color = function()
                    return enabled() and "#B83E4B" or "#278C55"
                end,
                selected = function()
                    return enabled()
                end,
                accessibility_label = "Toggle brick spawning",

                pressed = function()
                    set_enabled:send(not enabled())
                end,
            },
        },
    }
end)