-module(docs@views@page_view).
-compile([no_auto_import, nowarn_unused_vars]).

-export([page_view/2]).
-export_type([page_view_props/0]).

-type page_view_props() :: {page_view_props,
        docs@page_route:page_route(),
        list(binary())}.

-spec page_view(sprocket@context:context(), page_view_props()) -> {sprocket@context:context(),
    list(sprocket@element:element())}.
page_view(Ctx, Props) ->
    {page_view_props, Route, _} = Props,
    Pages = begin
        _pipe = [{page, <<"Introduction"/utf8>>, introduction},
            {page, <<"Components"/utf8>>, components},
            {page, <<"Props and Events"/utf8>>, events},
            {page, <<"State Management"/utf8>>, state_management},
            {page, <<"Effects"/utf8>>, effects},
            {page, <<"Hooks"/utf8>>, hooks},
            {page, <<"Under the Hood"/utf8>>, under_the_hood},
            {page, <<"Misc."/utf8>>, misc}],
        _pipe@1 = gleam@list:map(
            _pipe,
            fun(Page) -> {keyed_item, erlang:element(3, Page), Page} end
        ),
        sprocket@internal@utils@ordered_map:from_list(_pipe@1)
    end,
    Page_title = begin
        _pipe@2 = Pages,
        _pipe@3 = sprocket@internal@utils@ordered_map:get(_pipe@2, Route),
        _pipe@4 = gleam@result:map(
            _pipe@3,
            fun(Page@1) ->
                <<(erlang:element(2, Page@1))/binary, " - Sprocket"/utf8>>
            end
        ),
        gleam@result:unwrap(_pipe@4, <<"Sprocket"/utf8>>)
    end,
    sprocket@component:render(
        Ctx,
        [sprocket@html:html(
                [sprocket@html@attributes:lang(<<"en"/utf8>>)],
                [sprocket@html:head(
                        [],
                        [sprocket@html:title(Page_title),
                            sprocket@html:meta(
                                [sprocket@html@attributes:charset(
                                        <<"utf-8"/utf8>>
                                    )]
                            ),
                            sprocket@html:meta(
                                [sprocket@html@attributes:name(
                                        <<"viewport"/utf8>>
                                    ),
                                    sprocket@html@attributes:content(
                                        <<"width=device-width, initial-scale=1"/utf8>>
                                    )]
                            ),
                            sprocket@html:meta(
                                [sprocket@html@attributes:name(
                                        <<"description"/utf8>>
                                    ),
                                    sprocket@html@attributes:content(
                                        <<"Sprocket is a library for building real-time server components in Gleam."/utf8>>
                                    )]
                            ),
                            sprocket@html:link(
                                [sprocket@html@attributes:rel(
                                        <<"stylesheet"/utf8>>
                                    ),
                                    sprocket@html@attributes:href(
                                        <<"/app.css"/utf8>>
                                    )]
                            ),
                            sprocket@html:link(
                                [sprocket@html@attributes:rel(
                                        <<"stylesheet"/utf8>>
                                    ),
                                    sprocket@html@attributes:href(
                                        <<"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/utf8>>
                                    ),
                                    sprocket@html@attributes:integrity(
                                        <<"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="/utf8>>
                                    ),
                                    sprocket@html@attributes:crossorigin(
                                        <<"anonymous"/utf8>>
                                    ),
                                    sprocket@html@attributes:referrerpolicy(
                                        <<"no-referrer"/utf8>>
                                    )]
                            ),
                            sprocket@html:link(
                                [sprocket@html@attributes:id(
                                        <<"syntax-theme"/utf8>>
                                    ),
                                    sprocket@html@attributes:rel(
                                        <<"stylesheet"/utf8>>
                                    ),
                                    sprocket@html@attributes:media(
                                        <<"(prefers-color-scheme: dark)"/utf8>>
                                    ),
                                    sprocket@html@attributes:href(
                                        <<"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/atom-one-dark.min.css"/utf8>>
                                    )]
                            ),
                            sprocket@html:link(
                                [sprocket@html@attributes:id(
                                        <<"syntax-theme"/utf8>>
                                    ),
                                    sprocket@html@attributes:rel(
                                        <<"stylesheet"/utf8>>
                                    ),
                                    sprocket@html@attributes:media(
                                        <<"(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/utf8>>
                                    ),
                                    sprocket@html@attributes:href(
                                        <<"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/atom-one-light.min.css"/utf8>>
                                    )]
                            ),
                            sprocket@html:script(
                                [sprocket@html@attributes:src(
                                        <<"//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"/utf8>>
                                    )],
                                none
                            ),
                            sprocket@html:script(
                                [sprocket@html@attributes:src(
                                        <<"https://gleam.run/javascript/highlightjs-gleam.js"/utf8>>
                                    )],
                                none
                            )]
                    ),
                    sprocket@html:body(
                        [sprocket@html@attributes:class(
                                <<"bg-white dark:bg-gray-900 dark:text-white flex flex-col h-screen"/utf8>>
                            )],
                        [sprocket@html:'div'(
                                [],
                                [sprocket@component:component(
                                        fun docs@components@header:header/2,
                                        {header_props,
                                            [{menu_item,
                                                    <<"Github"/utf8>>,
                                                    <<"https://github.com/eliknebel/sprocket"/utf8>>}]}
                                    )]
                            ),
                            sprocket@component:component(
                                fun docs@components@responsive_drawer:responsive_drawer/2,
                                {responsive_drawer_props,
                                    sprocket@component:component(
                                        fun docs@components@sidebar:sidebar/2,
                                        {sidebar_props, Pages, Route}
                                    ),
                                    sprocket@html:'div'(
                                        [sprocket@html@attributes:class(
                                                <<"prose dark:prose-invert prose-sm md:prose-base container mx-auto p-12"/utf8>>
                                            )],
                                        [case Route of
                                                introduction ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@introduction:introduction_page/2,
                                                        introduction_page_props
                                                    );

                                                components ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@components:components_page/2,
                                                        components_page_props
                                                    );

                                                events ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@props_and_events:props_and_events_page/2,
                                                        props_and_events_page_props
                                                    );

                                                state_management ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@state_management:state_management_page/2,
                                                        state_management_page_props
                                                    );

                                                effects ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@effects:effects_page/2,
                                                        effects_page_props
                                                    );

                                                hooks ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@hooks:hooks_page/2,
                                                        hooks_page_props
                                                    );

                                                under_the_hood ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@under_the_hood:under_the_hood_page/2,
                                                        under_the_hood_props
                                                    );

                                                misc ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@misc:misc_page/2,
                                                        misc_page_props
                                                    );

                                                unknown ->
                                                    sprocket@component:component(
                                                        fun docs@components@pages@not_found:not_found_page/2,
                                                        not_found_page_props
                                                    )
                                            end, sprocket@component:component(
                                                fun docs@components@prev_next_nav:prev_next_nav/2,
                                                {prev_next_nav_props,
                                                    Pages,
                                                    Route}
                                            )]
                                    )}
                            )]
                    )]
            )]
    ).