use crate::components::{BottomSheetMenu, QuickMenuButton};
use crate::Route;
use dioxus::prelude::*;

// use dioxus_logger::tracing::{Level, info};

const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");

/// The Navbar component that will be rendered on all pages of our app since every page is under the layout.
///
///
/// This layout component wraps the UI of [Route::Home] and [Route::Blog] in a common navbar. The contents of the Home and Blog
/// routes will be rendered under the outlet inside this component
#[component]
pub fn Navbar() -> Element {
    let mut show_menu = use_signal(|| false);
    rsx! {
        document::Link { rel: "stylesheet", href: NAVBAR_CSS }

        div {
            class: "nav-menu jdc7ud",
            nav {
                class: "container md:flex flex-row items-center text-sm hidden",
                Link {
                    to: Route::Home {},
                    class: "nav-menu-left decoration-none w-auto md:w-150px lg:w-auto row flex flex-row items-center cursor-pointer px-4 text-[var(--secondary-text)] self-stretch hover:bg-[color:var(--main-hover)]",
                    i {
                        class: "i-carbon-code"
                    }
                    span {
                        class: "h2 ml-2 text-md font-bold hidden md:inline overflow-hidden whitespace-nowrap text-ellipsis",
                        "Danilo"
                        " "
                        "Cesa"
                    }
                }
                div {
                    class: "flex-row flex-1 self-center h-full justify-center md:flex hidden",
                    Link {
                        to: Route::Skills {},
                        class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
                        i {
                            class: "i-carbon-software-resource-cluster"
                        }
                        span {
                            class: "nav-menu-item-label jdc7ud",
                            "Skills"
                        }
                    }

                    // Link {
                    //     class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
                    //     to: Route::Projects {},
                    //     i {
                    //         class: "i-carbon-cube text-2em"
                    //     }
                    //     span {
                    //         class: "nav-menu-item-label jdc7ud",
                    //         "Projects"
                    //     }
                    // }

                    Link {
                        class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
                        to: Route::Experiences {},
                        i {
                            class: "i-carbon-development text-1.3em"
                        }
                        span {
                            class: "nav-menu-item-label jdc7ud",
                            "Experiences"
                        }
                    }
                }

            }
        }

        if !show_menu() {
            QuickMenuButton {
                on_click: move |_| show_menu.set(true)
            }
        }

        // Bottom Sheet Menu
        BottomSheetMenu {
            show: show_menu(),
            on_close: move |_| show_menu.set(false)
        }

        Outlet::<Route> {}
    }
}
