sprocket

-module(docs@components@clock).
-compile([no_auto_import, nowarn_unused_vars]).

-export([clock/2]).
-export_type([model/0, msg/0, clock_props/0]).

-type model() :: {model, integer(), binary()}.

-type msg() :: {update_time, integer()}.

-type clock_props() :: {clock_props, gleam@option:option(binary())}.

-spec update(model(), msg()) -> model().
update(Model, Msg) ->
    case Msg of
        {update_time, Time} ->
            erlang:setelement(2, Model, Time)
    end.

-spec initial() -> model().
initial() ->
    {model, os:system_time(second), <<"UTC"/utf8>>}.

-spec clock(sprocket@socket:socket(), clock_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
clock(Socket, Props) ->
    {clock_props, Label} = Props,
    sprocket@hooks@reducer:reducer(
        Socket,
        initial(),
        fun update/2,
        fun(Socket@1, _use1) ->
            {state, {model, Time, _}, Dispatch} = _use1,
            sprocket@hooks@effect:effect(
                Socket@1,
                fun() ->
                    gleam@io:println(<<"Clock component mounted!"/utf8>>),
                    none
                end,
                {with_deps, []},
                fun(Socket@2) ->
                    sprocket@hooks@effect:effect(
                        Socket@2,
                        fun() ->
                            Cancel = docs@utils@timer:interval(
                                1000,
                                fun() ->
                                    Dispatch(
                                        {update_time, os:system_time(second)}
                                    )
                                end
                            ),
                            {some, fun() -> Cancel() end}
                        end,
                        {with_deps, [sprocket@hooks:dep(Time)]},
                        fun(Socket@3) ->
                            Current_time = gleam@int:to_string(Time),
                            sprocket@component:render(Socket@3, case Label of
                                    {some, Label@1} ->
                                        [sprocket@html:span(
                                                [],
                                                [sprocket@html:text(Label@1)]
                                            ),
                                            sprocket@html:span(
                                                [],
                                                [sprocket@html:text(
                                                        Current_time
                                                    )]
                                            )];

                                    none ->
                                        [sprocket@html:text(Current_time)]
                                end)
                        end
                    )
                end
            )
        end
    ).