sprocket

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

-export([say_hello/2]).
-export_type([model/0, msg/0, say_hello_props/0]).

-type model() :: {model,
        gleam@option:option(integer()),
        list({binary(), binary()})}.

-type msg() :: no_op | say_hello.

-type say_hello_props() :: say_hello_props.

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

        say_hello ->
            erlang:setelement(
                2,
                Model,
                {some,
                    gleam@int:random(
                        0,
                        gleam@list:length(erlang:element(3, Model))
                    )}
            )
    end.

-spec initial(list({binary(), binary()})) -> model().
initial(Options) ->
    {model, none, Options}.

-spec hello_strings() -> list({binary(), binary()}).
hello_strings() ->
    [{<<"English"/utf8>>, <<"Hello"/utf8>>},
        {<<"Spanish"/utf8>>, <<"Hola"/utf8>>},
        {<<"French"/utf8>>, <<"Bonjour"/utf8>>},
        {<<"German"/utf8>>, <<"Hallo"/utf8>>},
        {<<"Italian"/utf8>>, <<"Ciao"/utf8>>},
        {<<"Portuguese"/utf8>>, <<"Olá"/utf8>>},
        {<<"Hawaiian"/utf8>>, <<"Aloha"/utf8>>},
        {<<"Chinese (Mandarin)"/utf8>>, <<"你好,(Nǐ hǎo)"/utf8>>},
        {<<"Japanese"/utf8>>, <<"こんにち, (Konnichiwa)"/utf8>>},
        {<<"Korean"/utf8>>, <<"안녕하세, (Annyeonghaseyo)"/utf8>>},
        {<<"Arabic"/utf8>>, <<"مرحب, (Marhaba)"/utf8>>},
        {<<"Hindi"/utf8>>, <<"नमस्त, (Namaste)"/utf8>>},
        {<<"Turkish"/utf8>>, <<"Merhaba"/utf8>>},
        {<<"Dutch"/utf8>>, <<"Hallo"/utf8>>},
        {<<"Swedish"/utf8>>, <<"Hej"/utf8>>},
        {<<"Norwegian"/utf8>>, <<"Hei"/utf8>>},
        {<<"Danish"/utf8>>, <<"Hej"/utf8>>},
        {<<"Greek"/utf8>>, <<"Γεια σας,(Yia sas)"/utf8>>},
        {<<"Polish"/utf8>>, <<"Cześć"/utf8>>},
        {<<"Swahili"/utf8>>, <<"Hujambo"/utf8>>}].

-spec say_hello(sprocket@socket:socket(), say_hello_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
say_hello(Socket, _) ->
    sprocket@hooks@reducer:reducer(
        Socket,
        initial(hello_strings()),
        fun update/2,
        fun(Socket@1, _use1) ->
            {state, {model, Selection, Options}, Dispatch} = _use1,
            sprocket@hooks@callback:callback(
                Socket@1,
                {callback_fn, fun() -> Dispatch(say_hello) end},
                {with_deps, []},
                fun(Socket@2, On_say_hello) ->
                    Hello = begin
                        _pipe = Selection,
                        _pipe@2 = gleam@option:map(
                            _pipe,
                            fun(I) -> _pipe@1 = gleam@list:at(Options, I),
                                gleam@option:from_result(_pipe@1) end
                        ),
                        gleam@option:flatten(_pipe@2)
                    end,
                    sprocket@component:render(
                        Socket@2,
                        [sprocket@html:'div'(
                                [],
                                [sprocket@html:button(
                                        [sprocket@html@attribute:class(
                                                <<"p-2 bg-blue-500 hover:bg-blue-700 text-white rounded"/utf8>>
                                            ),
                                            sprocket@html@attribute:on_click(
                                                On_say_hello
                                            )],
                                        [sprocket@html:text(
                                                <<"Say Hello"/utf8>>
                                            )]
                                    ) |
                                    case Hello of
                                        none ->
                                            [];

                                        {some, Hello@1} ->
                                            [sprocket@html:span(
                                                    [sprocket@html@attribute:class(
                                                            <<"ml-2"/utf8>>
                                                        )],
                                                    [sprocket@html:text(
                                                            gleam@pair:second(
                                                                Hello@1
                                                            )
                                                        )]
                                                ),
                                                sprocket@html:span(
                                                    [sprocket@html@attribute:class(
                                                            <<"ml-2 text-gray-400 bold"/utf8>>
                                                        )],
                                                    [sprocket@html:text(
                                                            gleam@pair:first(
                                                                Hello@1
                                                            )
                                                        )]
                                                )]
                                    end]
                            )]
                    )
                end
            )
        end
    ).