use crate::hooks::use_user_context;
use crate::Route;
use ybc::NavbarFixed::Top;
use yew::prelude::*;
use yew_hooks::prelude::*;
use yew_router::prelude::*;

#[derive(PartialEq, Properties)]
pub struct Props {
    pub children: Children,
}

#[function_component]
pub fn BasePage(props: &Props) -> Html {
    let navigator = use_navigator().unwrap();
    let user_ctx = use_user_context();

    let node = use_node_ref();
    let size = use_size(node.clone());

    let authenticated = user_ctx.is_authenticated();
    let title = if authenticated {
        html! {"Photos"}
    } else {
        html! {"No photos"}
    };

    let navbrand = html! {
        <ybc::NavbarItem>
            <ybc::Title
                classes={classes!("has-text-white")}
                size={ybc::HeaderSize::Is4}>
                {title}
            </ybc::Title>
        </ybc::NavbarItem>
    };

    let account_button = if authenticated {
        let onclick = {
            Callback::from(move |_| {
                user_ctx.logout();
            })
        };
        html! {
            <ybc::ButtonAnchor
                classes={classes!("is-outlined")}
                rel={String::from("noopener noreferrer")}
                target={String::from("_blank")}
                href=""
                {onclick}>
                {"logout"}
            </ybc::ButtonAnchor>
        }
    } else {
        let onclick = Callback::from(move |_| navigator.push(&Route::Login));
        html! {
            <ybc::Button
                // classes={classes!("is-outlined")}
                {onclick}>
                {"login"}
            </ybc::Button>
        }
    };

    let navstart = html! {};
    let navend = html! {
        <>
        // <ybc::NavbarItem>
        //     <ybc::Button
        //         // classes={classes!("is-outlined")}
        //     >
        //         {"Photos"}
        //     </ybc::Button>
        // </ybc::NavbarItem>
        <ybc::NavbarItem>
            {account_button}
        </ybc::NavbarItem>
        </>
    };

    html! {
        <>
            <ybc::Navbar
                fixed={Top}
                classes={classes!("is-info")}
                padded={true}
                {navbrand}
                {navstart}
                {navend}
            />

            <div>
            { props.children.clone() }
            </div>
        </>
    }
}