sprocket

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

-export([button/2, display/2, counter/2]).
-export_type([msg/0, counter_props/0, button_props/0, display_props/0]).

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

-type counter_props() :: {counter_props, boolean()}.

-type button_props() :: {button_props,
        gleam@option:option(binary()),
        binary(),
        fun(() -> nil)}.

-type display_props() :: {display_props,
        integer(),
        gleam@option:option(fun(() -> nil))}.

-spec update(integer(), msg()) -> integer().
update(_, Msg) ->
    case Msg of
        {update_counter, Count} ->
            Count
    end.

-spec button(sprocket@context:context(), button_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
button(Ctx, Props) ->
    {button_props, Class, Label, _} = Props,
    sprocket@hooks@callback:callback(
        Ctx,
        {callback_fn, erlang:element(4, Props)},
        {with_deps, [sprocket@hooks:dep(erlang:element(4, Props))]},
        fun(Ctx@1, On_click) ->
            sprocket@component:render(
                Ctx@1,
                [sprocket@html:button_text(
                        [sprocket@html@attributes:on_click(On_click),
                            sprocket@html@attributes:classes(
                                [Class,
                                    {some,
                                        <<"p-1 px-2 border dark:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600"/utf8>>}]
                            )],
                        Label
                    )]
            )
        end
    ).

-spec display(sprocket@context:context(), display_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
display(Ctx, Props) ->
    {display_props, Count, On_reset} = Props,
    sprocket@hooks@callback:callback(
        Ctx,
        {callback_fn, gleam@option:unwrap(On_reset, fun() -> nil end)},
        {with_deps, []},
        fun(Ctx@1, On_reset@1) ->
            sprocket@component:render(
                Ctx@1,
                [sprocket@html:span(
                        [sprocket@html@attributes:on_doubleclick(On_reset@1),
                            sprocket@html@attributes:class(
                                <<"p-1 px-2 w-10 bg-white dark:bg-gray-900 border-t border-b dark:border-gray-500 align-center text-center select-none"/utf8>>
                            )],
                        [sprocket@html:text(gleam@int:to_string(Count))]
                    )]
            )
        end
    ).

-spec counter(sprocket@context:context(), counter_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
counter(Ctx, Props) ->
    {counter_props, Enable_reset} = Props,
    sprocket@hooks@reducer:reducer(
        Ctx,
        0,
        fun update/2,
        fun(Ctx@1, _use1) ->
            {state, Count, Dispatch} = _use1,
            sprocket@component:render(
                Ctx@1,
                [sprocket@html:'div'(
                        [sprocket@html@attributes:class(
                                <<"flex flex-row m-4"/utf8>>
                            )],
                        [sprocket@component:component(
                                fun button/2,
                                {button_props,
                                    {some, <<"rounded-l"/utf8>>},
                                    <<"-"/utf8>>,
                                    fun() ->
                                        Dispatch({update_counter, Count - 1})
                                    end}
                            ),
                            sprocket@component:component(
                                fun display/2,
                                {display_props,
                                    Count,
                                    {some, fun() -> case Enable_reset of
                                                true ->
                                                    Dispatch(
                                                        {update_counter, 0}
                                                    );

                                                false ->
                                                    nil
                                            end end}}
                            ),
                            sprocket@component:component(
                                fun button/2,
                                {button_props,
                                    {some, <<"rounded-r"/utf8>>},
                                    <<"+"/utf8>>,
                                    fun() ->
                                        Dispatch({update_counter, Count + 1})
                                    end}
                            )]
                    )]
            )
        end
    ).