sprocket

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

-export([responsive_drawer/2]).
-export_type([model/0, msg/0, responsive_drawer_props/0]).

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

-type msg() :: no_op | show | hide | toggle.

-type responsive_drawer_props() :: {responsive_drawer_props,
        sprocket@element:element(),
        sprocket@element:element()}.

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

        show ->
            {model, true};

        hide ->
            {model, false};

        toggle ->
            {model, not erlang:element(2, Model)}
    end.

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

-spec responsive_drawer(sprocket@socket:socket(), responsive_drawer_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
responsive_drawer(Socket, Props) ->
    {responsive_drawer_props, Drawer, Content} = Props,
    sprocket@hooks@reducer:reducer(
        Socket,
        initial(),
        fun update/2,
        fun(Socket@1, _use1) ->
            {state, {model, Show}, Dispatch} = _use1,
            sprocket@hooks@callback:callback(
                Socket@1,
                {callback_fn, fun() -> Dispatch(toggle) end},
                on_mount,
                fun(Socket@2, Toggle_drawer) ->
                    sprocket@hooks@callback:callback(
                        Socket@2,
                        {callback_fn, fun() -> Dispatch(hide) end},
                        on_mount,
                        fun(Socket@3, Hide_drawer) ->
                            Backdrop = sprocket@html:'div'(
                                [sprocket@html@attribute:class(
                                        <<"absolute bg-gray-900 bg-opacity-50 dark:bg-opacity-80 inset-0 z-30"/utf8>>
                                    ),
                                    sprocket@html@attribute:on_click(
                                        Hide_drawer
                                    )],
                                []
                            ),
                            sprocket@component:render(
                                Socket@3,
                                [sprocket@html:'div'(
                                        [sprocket@html@attribute:classes(
                                                [{some,
                                                        <<"relative flex-1 flex flex-row"/utf8>>}]
                                            )],
                                        [sprocket@html:aside(
                                                [sprocket@html@attribute:classes(
                                                        [case Show of
                                                                true ->
                                                                    {some,
                                                                        <<"block absolute top-0 left-0 bottom-0"/utf8>>};

                                                                false ->
                                                                    {some,
                                                                        <<"hidden"/utf8>>}
                                                            end, {some,
                                                                <<"sm:block w-64 z-40 transition-transform -translate-x-full translate-x-0 transition-transform"/utf8>>}]
                                                    )],
                                                [sprocket@html:'div'(
                                                        [sprocket@html@attribute:class(
                                                                <<"h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800"/utf8>>
                                                            )],
                                                        [Drawer]
                                                    )]
                                            ),
                                            sprocket@html:'div'(
                                                [sprocket@html@attribute:class(
                                                        <<"flex-1"/utf8>>
                                                    )],
                                                [sprocket@html:button(
                                                        [sprocket@html@attribute:on_click(
                                                                Toggle_drawer
                                                            ),
                                                            sprocket@html@attribute:class(
                                                                <<"
                    inline-flex
                    sm:hidden
                    items-center
                    p-2
                    mt-2
                    ml-3
                    text-sm
                    text-gray-500
                    rounded-lg
                    hover:bg-gray-100
                    focus:outline-none
                    focus:ring-2
                    focus:ring-gray-200
                    dark:text-gray-400
                    dark:hover:bg-gray-700
                    dark:focus:ring-gray-600
                  "/utf8>>
                                                            )],
                                                        [sprocket@html:i(
                                                                [sprocket@html@attribute:class(
                                                                        <<"fa-solid fa-bars"/utf8>>
                                                                    )],
                                                                []
                                                            )]
                                                    ),
                                                    Content]
                                            ) |
                                            case Show of
                                                true ->
                                                    [Backdrop];

                                                false ->
                                                    []
                                            end]
                                    )]
                            )
                        end
                    )
                end
            )
        end
    ).