use maud::{html, PreEscaped};

use crate::utils::theme;

/// Navigation template builder.
///
/// Takes the main HTML content as input and splices it into the navigation template.
pub fn build_template(
    main: PreEscaped<String>,
    title: &str,
    back: Option<&str>,
) -> PreEscaped<String> {
    // retrieve the current theme value
    let theme = theme::get_theme();

    // conditionally render the hermies icon and theme-switcher icon with correct link
    let (hermies, theme_switcher) = match theme.as_str() {
        // if we're using the dark theme, render light icons and "light" query param
        "dark" => (
            "/icons/hermies_hex_light.svg",
            html! {
                a class="nav-item" href="/settings/theme/light" {
                    img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun";
                }
            },
        ),
        // otherwise, assume we're using light mode
        _ => (
            "/icons/hermies_hex.svg",
            html! {
                a class="nav-item" href="/settings/theme/dark" {
                    img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/moon.png" alt="Moon";
                }
            },
        ),
    };

    html! {
        (PreEscaped("<!-- Top navigation bar -->"))
        nav class="nav-bar" {
            a id="backButton" class="nav-item" href=[back] title="Back" {
                img class="icon-medium nav-icon-left icon-active" src="/icons/back.svg" alt="Back";
            }
            h1 class="nav-title" { (title) }
            a class="nav-item" id="logoutButton" href="/auth/logout" title="Logout" {
                img class="icon-medium nav-icon-right icon-active" src="/icons/enter.svg" alt="Logout";
            }
        }
        (PreEscaped("<!-- Main content container -->"))
        main { (main) }
        (PreEscaped("<!-- Bottom navigation bar -->"))
        nav class="nav-bar" {
            a class="nav-item" href="https://scuttlebutt.nz/" {
                img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src=(hermies) alt="Secure Scuttlebutt";
            }
            a class="nav-item" href="/" {
                img class="icon nav-icon-left" src="/icons/peach-icon.png" alt="PeachCloud" title="Home";
            }
            (theme_switcher)
        }
    }
}