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

-export([misc_page/2]).
-export_type([msg/0, model/0, misc_page_props/0, unit_toggle_props/0]).

-type msg() :: no_op | {set_time_unit, gleam@erlang:time_unit()}.

-type model() :: {model, gleam@erlang:time_unit()}.

-type misc_page_props() :: misc_page_props.

-type unit_toggle_props() :: {unit_toggle_props,
        gleam@erlang:time_unit(),
        fun((gleam@erlang:time_unit()) -> nil)}.

-spec update(model(), msg()) -> model().
update(State, Msg) ->
    case Msg of
        no_op ->
            State;

        {set_time_unit, Time_unit} ->
            {model, Time_unit}
    end.

-spec initial() -> model().
initial() ->
    {model, second}.

-spec misc_page(sprocket@context:context(), misc_page_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
misc_page(Ctx, _) ->
    sprocket@hooks@reducer:reducer(
        Ctx,
        initial(),
        fun update/2,
        fun(Ctx@1, _use1) ->
            {state, {model, Time_unit}, _} = _use1,
            sprocket@component:render(
                Ctx@1,
                [sprocket@html:article(
                        [],
                        [sprocket@html:h1(
                                [],
                                [sprocket@html:text(<<"Miscellaneous"/utf8>>)]
                            ),
                            sprocket@html:h2(
                                [],
                                [sprocket@html:text(
                                        <<"Example Components"/utf8>>
                                    )]
                            ),
                            sprocket@html:'div'(
                                [],
                                [sprocket@component:component(
                                        fun docs@components@clock:clock/2,
                                        {clock_props,
                                            {some,
                                                <<"The current time is: "/utf8>>},
                                            {some, Time_unit}}
                                    ),
                                    sprocket@html:p(
                                        [],
                                        [sprocket@html:text(
                                                <<"An html escaped & safe <span style=\"color: green\">string</span>"/utf8>>
                                            )]
                                    ),
                                    sprocket@html:p(
                                        [],
                                        [sprocket@html:dangerous_raw_html(
                                                <<"A <b>raw <em>html</em></b> <span style=\"color: blue\">string</span></b>"/utf8>>
                                            )]
                                    ),
                                    sprocket@component:component(
                                        fun docs@components@counter:counter/2,
                                        {counter_props, {some, 0}}
                                    ),
                                    sprocket@component:component(
                                        fun docs@components@say_hello:say_hello/2,
                                        say_hello_props
                                    )]
                            )]
                    )]
            )
        end
    ).

-spec maybe_active(boolean()) -> gleam@option:option(binary()).
maybe_active(Is_active) ->
    case Is_active of
        true ->
            {some,
                <<"text-white bg-gray-500 border-gray-500 hover:bg-gray-500 dark:bg-gray-900"/utf8>>};

        false ->
            none
    end.

-spec unit_toggle(sprocket@context:context(), unit_toggle_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
unit_toggle(Ctx, Props) ->
    {unit_toggle_props, Current, On_select} = Props,
    sprocket@hooks@callback:callback(
        Ctx,
        {callback_fn, fun() -> On_select(millisecond) end},
        {with_deps, []},
        fun(Ctx@1, On_select_millisecond) ->
            sprocket@hooks@callback:callback(
                Ctx@1,
                {callback_fn, fun() -> On_select(second) end},
                {with_deps, []},
                fun(Ctx@2, On_select_second) ->
                    sprocket@component:render(
                        Ctx@2,
                        [sprocket@html:'div'(
                                [],
                                [sprocket@html:p(
                                        [],
                                        [sprocket@html:button_text(
                                                [sprocket@html@attributes:on_click(
                                                        On_select_second
                                                    ),
                                                    sprocket@html@attributes:classes(
                                                        [{some,
                                                                <<"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>>},
                                                            maybe_active(
                                                                Current =:= second
                                                            )]
                                                    )],
                                                <<"Second"/utf8>>
                                            ),
                                            sprocket@html:button_text(
                                                [sprocket@html@attributes:on_click(
                                                        On_select_millisecond
                                                    ),
                                                    sprocket@html@attributes:classes(
                                                        [{some,
                                                                <<"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>>},
                                                            maybe_active(
                                                                Current =:= millisecond
                                                            )]
                                                    )],
                                                <<"Millisecond"/utf8>>
                                            )]
                                    )]
                            )]
                    )
                end
            )
        end
    ).