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

-export([search_bar/2]).
-export_type([model/0, msg/0, search_bar_props/0]).

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

-type msg() :: no_op | {set_query, binary()}.

-type search_bar_props() :: {search_bar_props, fun((binary()) -> nil)}.

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

        {set_query, Query} ->
            {model, Query}
    end.

-spec initial() -> model().
initial() ->
    {model, <<""/utf8>>}.

-spec search_bar(sprocket@socket:socket(), search_bar_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
search_bar(Socket, Props) ->
    {search_bar_props, On_search} = Props,
    sprocket@hooks@reducer:reducer(
        Socket,
        initial(),
        fun update/2,
        fun(Socket@1, _use1) ->
            {state, {model, Query}, Dispatch} = _use1,
            sprocket@hooks@callback:callback(
                Socket@1,
                {callback_with_value_fn,
                    fun(Value) ->
                        On_search(Value),
                        Dispatch({set_query, Value})
                    end},
                {with_deps, [sprocket@hooks:dep(On_search)]},
                fun(Socket@2, On_input_query) ->
                    sprocket@component:render(
                        Socket@2,
                        [sprocket@html:input(
                                [sprocket@html@attribute:input_type(
                                        <<"text"/utf8>>
                                    ),
                                    sprocket@html@attribute:class(
                                        <<"m-2 pl-2 pr-4 py-1 rounded bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-500"/utf8>>
                                    ),
                                    sprocket@html@attribute:placeholder(
                                        <<"Search..."/utf8>>
                                    ),
                                    sprocket@html@attribute:value(Query),
                                    sprocket@html@attribute:on_input(
                                        On_input_query
                                    )]
                            )]
                    )
                end
            )
        end
    ).