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

-export([counter/2]).
-export_type([msg/0, counter_props/0]).

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

-type counter_props() :: {counter_props, gleam@option:option(integer())}.

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

-spec counter(sprocket@context:context(), counter_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
counter(Ctx, Props) ->
    {counter_props, Initial} = Props,
    sprocket@hooks@reducer:reducer(
        Ctx,
        gleam@option:unwrap(Initial, 0),
        fun update/2,
        fun(Ctx@1, _use1) ->
            {state, Count, Dispatch} = _use1,
            sprocket@hooks@effect:effect(
                Ctx@1,
                fun() ->
                    gleam@io:println(
                        gleam@string:append(
                            <<"Count: "/utf8>>,
                            gleam@int:to_string(Count)
                        )
                    ),
                    none
                end,
                {with_deps, [sprocket@hooks:dep(Count)]},
                fun(Ctx@2) ->
                    sprocket@hooks@callback:callback(
                        Ctx@2,
                        {callback_fn,
                            fun() -> Dispatch({update_counter, Count + 1}) end},
                        {with_deps, [sprocket@hooks:dep(Count)]},
                        fun(Ctx@3, On_increment) ->
                            sprocket@hooks@callback:callback(
                                Ctx@3,
                                {callback_fn,
                                    fun() ->
                                        Dispatch({update_counter, Count - 1})
                                    end},
                                {with_deps, [sprocket@hooks:dep(Count)]},
                                fun(Ctx@4, On_decrement) ->
                                    sprocket@component:render(
                                        Ctx@4,
                                        [sprocket@html:'div'(
                                                [sprocket@html@attributes:class(
                                                        <<"flex flex-row m-4"/utf8>>
                                                    )],
                                                [sprocket@html:button(
                                                        [sprocket@html@attributes:class(
                                                                <<"p-1 px-2 border dark:border-gray-500 rounded-l 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>>
                                                            ),
                                                            sprocket@html@attributes:on_click(
                                                                On_decrement
                                                            )],
                                                        [sprocket@html:text(
                                                                <<"-"/utf8>>
                                                            )]
                                                    ),
                                                    sprocket@html:span(
                                                        [sprocket@html@attributes:class(
                                                                <<"p-1 px-2 w-10 border-t border-b dark:border-gray-500 align-center text-center"/utf8>>
                                                            )],
                                                        [sprocket@html:text(
                                                                gleam@int:to_string(
                                                                    Count
                                                                )
                                                            )]
                                                    ),
                                                    sprocket@html:button(
                                                        [sprocket@html@attributes:class(
                                                                <<"p-1 px-2 border dark:border-gray-500 rounded-r 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>>
                                                            ),
                                                            sprocket@html@attributes:on_click(
                                                                On_increment
                                                            )],
                                                        [sprocket@html:text(
                                                                <<"+"/utf8>>
                                                            )]
                                                    )]
                                            )]
                                    )
                                end
                            )
                        end
                    )
                end
            )
        end
    ).