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

-export([analog_clock/2]).
-export_type([model/0, msg/0, analog_clock_props/0]).

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

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

-type analog_clock_props() :: analog_clock_props.

-spec update(model(), msg()) -> model().
update(Model, Msg) ->
    case Msg of
        {update_time, Time} ->
            erlang:setelement(2, Model, Time)
    end.

-spec initial() -> model().
initial() ->
    {model, gleam@erlang:system_time(second), <<"UTC"/utf8>>}.

-spec analog_clock(sprocket@context:context(), analog_clock_props()) -> {sprocket@context:context(),
    list(sprocket@context:element())}.
analog_clock(Ctx, _) ->
    sprocket@hooks@reducer:reducer(
        Ctx,
        initial(),
        fun update/2,
        fun(Ctx@1, _use1, Dispatch) ->
            {model, Time, _} = _use1,
            sprocket@hooks@effect:effect(
                Ctx@1,
                fun() ->
                    Interval_duration = 1000,
                    Update_time = fun() ->
                        Dispatch(
                            {update_time, gleam@erlang:system_time(second)}
                        )
                    end,
                    Update_time(),
                    Cancel = sprocket@internal@utils@timer:interval(
                        Interval_duration,
                        Update_time
                    ),
                    {some, fun() -> Cancel() end}
                end,
                {with_deps, [sprocket@hooks:dep(Time)]},
                fun(Ctx@2) ->
                    {Hours, Minutes, Seconds} = 'Elixir.FFIUtils':clock_time(
                        Time
                    ),
                    Hours@1 = case Hours > 12 of
                        true ->
                            Hours - 12;

                        false ->
                            Hours
                    end,
                    Minutes@1 = (Minutes * 60) + Seconds,
                    Hours@2 = (Hours@1 * 3600) + Minutes@1,
                    Clock_second_hand_transform = <<<<"rotate("/utf8,
                            (gleam@float:to_string(
                                360.0 * (gleam@int:to_float(Seconds) / 60.0)
                            ))/binary>>/binary,
                        ",192,192)"/utf8>>,
                    Clock_minute_hand_transform = <<<<"rotate("/utf8,
                            (gleam@float:to_string(
                                360.0 * (gleam@int:to_float(Minutes@1) / 3600.0)
                            ))/binary>>/binary,
                        ",192,192)"/utf8>>,
                    Clock_hour_hand_transform = <<<<"rotate("/utf8,
                            (gleam@float:to_string(
                                360.0 * (gleam@int:to_float(Hours@2) / 43200.0)
                            ))/binary>>/binary,
                        ",192,192)"/utf8>>,
                    sprocket@component:render(
                        Ctx@2,
                        [sprocket@html@svg@elements:svg(
                                [sprocket@html@svg@attributes:version(
                                        <<"1.1"/utf8>>
                                    ),
                                    sprocket@html@attributes:xmlns(
                                        <<"http://www.w3.org/2000/svg"/utf8>>
                                    ),
                                    sprocket@html@attributes:xmlns_xlink(
                                        <<"http://www.w3.org/1999/xlink"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:x(
                                        <<"0px"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:y(
                                        <<"0px"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:width(
                                        <<"384px"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:height(
                                        <<"384px"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:view_box(
                                        <<"0 0 384 384"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:xml_space(
                                        <<"preserve"/utf8>>
                                    ),
                                    sprocket@html@svg@attributes:transform(
                                        <<"scale(0.5)"/utf8>>
                                    )],
                                [sprocket@html@svg@elements:path(
                                        [sprocket@html@svg@attributes:class(
                                                <<"clock-frame"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:d(
                                                <<"M192,0C85.961,0,0,85.961,0,192s85.961,192,192,192s192-85.961,192-192S298.039,0,192,0zM315.037,315.037c-9.454,9.454-19.809,17.679-30.864,24.609l-14.976-25.939l-10.396,6l14.989,25.964c-23.156,12.363-48.947,19.312-75.792,20.216V336h-12v29.887c-26.845-0.903-52.636-7.854-75.793-20.217l14.989-25.963l-10.393-6l-14.976,25.938c-11.055-6.931-21.41-15.154-30.864-24.608s-17.679-19.809-24.61-30.864l25.939-14.976l-6-10.396l-25.961,14.99C25.966,250.637,19.017,224.846,18.113,198H48v-12H18.113c0.904-26.844,7.853-52.634,20.216-75.791l25.96,14.988l6.004-10.395L44.354,99.827c6.931-11.055,15.156-21.41,24.61-30.864s19.809-17.679,30.864-24.61l14.976,25.939l10.395-6L110.208,38.33C133.365,25.966,159.155,19.017,186,18.113V48h12V18.113c26.846,0.904,52.635,7.853,75.792,20.216l-14.991,25.965l10.395,6l14.978-25.942c11.056,6.931,21.41,15.156,30.865,24.611c9.454,9.454,17.679,19.808,24.608,30.863l-25.94,14.976l6,10.396l25.965-14.99c12.363,23.157,19.312,48.948,20.218,75.792H336v12h29.887c-0.904,26.845-7.853,52.636-20.216,75.792l-25.964-14.989l-6.002,10.396l25.941,14.978C332.715,295.229,324.491,305.583,315.037,315.037z"/utf8>>
                                            )],
                                        []
                                    ),
                                    sprocket@html@svg@elements:line(
                                        [sprocket@html@svg@attributes:class(
                                                <<"clock-hour-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:id(
                                                <<"clock-hour-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:transform(
                                                Clock_hour_hand_transform
                                            ),
                                            sprocket@html@svg@attributes:fill(
                                                <<"none"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke(
                                                <<"#000000"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke_width(
                                                <<"18"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke_miterlimit(
                                                <<"10"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:x1(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:y1(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:x2(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:y2(
                                                <<"87.5"/utf8>>
                                            )],
                                        []
                                    ),
                                    sprocket@html@svg@elements:line(
                                        [sprocket@html@svg@attributes:class(
                                                <<"clock-minute-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:id(
                                                <<"anim-clock-minute-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:transform(
                                                Clock_minute_hand_transform
                                            ),
                                            sprocket@html@svg@attributes:fill(
                                                <<"none"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke(
                                                <<"#000000"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke_width(
                                                <<"12"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:stroke_miterlimit(
                                                <<"10"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:x1(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:y1(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:x2(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:y2(
                                                <<"54"/utf8>>
                                            )],
                                        []
                                    ),
                                    sprocket@html@svg@elements:circle(
                                        [sprocket@html@svg@attributes:class(
                                                <<"clock-axis"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:cx(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:cy(
                                                <<"192"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:r(
                                                <<"9"/utf8>>
                                            )],
                                        []
                                    ),
                                    sprocket@html@svg@elements:g(
                                        [sprocket@html@svg@attributes:class(
                                                <<"clock-second-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:id(
                                                <<"anim-clock-second-hand"/utf8>>
                                            ),
                                            sprocket@html@svg@attributes:transform(
                                                Clock_second_hand_transform
                                            )],
                                        [sprocket@html@svg@elements:line(
                                                [sprocket@html@svg@attributes:class(
                                                        <<"clock-second-hand-arm"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:fill(
                                                        <<"none"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:stroke(
                                                        <<"#D53A1F"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:stroke_width(
                                                        <<"4"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:stroke_miterlimit(
                                                        <<"10"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:x1(
                                                        <<"192"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:y1(
                                                        <<"192"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:x2(
                                                        <<"192"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:y2(
                                                        <<"28.5"/utf8>>
                                                    )],
                                                []
                                            ),
                                            sprocket@html@svg@elements:circle(
                                                [sprocket@html@svg@attributes:class(
                                                        <<"clock-second-hand-axis"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:fill(
                                                        <<"#D53A1F"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:cx(
                                                        <<"192"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:cy(
                                                        <<"192"/utf8>>
                                                    ),
                                                    sprocket@html@svg@attributes:r(
                                                        <<"4.5"/utf8>>
                                                    )],
                                                []
                                            )]
                                    )]
                            )]
                    )
                end
            )
        end
    ).