use crate::Route;
use dioxus::prelude::*;

const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
const MAIN_CSS: Asset = asset!("/assets/styling/main.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 {
    rsx! {
        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
        
        div {
            class: "nav-menu jdc7ud",
            nav {
                class: "container flex flex-row items-center text-sm",
                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 text-2em"
                    }
                    span {  
                        class: "ml-2 text-md font-bold hidden md:inline overflow-hidden whitespace-nowrap text-ellipsis",
                        "Danilo"
                        " "
                        "Cesa"
                    }
                }
                div {
                    class: "flex-1 block overflow-hidden md:hidden whitespace-nowrap text-ellipsis text-center",
                    "Danilo"
                    " "
                    "Cesa"
                }
                div {
                    class: "flex-row flex-1 self-center h-full justify-center hidden md:flex",
                    Link {
                        to: Route::Skills {},
                        class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
                        i {
                            class: "i-carbon-software-resource-cluster text-1.3em"
                        }
                        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-1.3em"
                        }
                        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"
                        }
                    }

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

                // div {
                //     class: "row h-full justify-center items-stretch m-l-auto md:m-l-0 w-auto md:w-150px gap-1 text-1.15em",
                //     div {
                //         class: "row hidden md:flex",
                //         // a {
                //         //     class: "text-inherit col-center self-stretch px-2 hover:bg-[color:var(--main-hover)]"
                //         // }
                //         // button {  
                //         //     class: "bg-transparent text-1em border-none cursor-pointer hover:bg-[color:var(--main-hover)] text-[var(--secondary-text)] px-2",
                //         //     i {  
                //         //         class: "i-carbon-moon"
                //         //     }
                //         // }
                //     }

                //     div {
                //         class: "col-center md:hidden h-full hover:bg-[var(--main-hover)] cursor-pointer",
                //         div {
                //             class: "nav-bar-mobile-btn col-center jdc7ud"
                //         }
                //     }
                // }
            }
        }


        // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
        // the [`Home`] or [`Blog`] component depending on the current route.
        Outlet::<Route> {}
    }
}
