use yew::{function_component, html, Html, Properties};

#[function_component]
pub fn Navbar(props: &NavbarProps) -> Html {
    let elements_html = props.elements.iter().map(|elem| html!{
        <NavbarElem icon={elem.icon.clone()} tooltip={elem.tooltip.clone()} link={elem.link.clone()} spacer={elem.spacer}/>
    }).collect::<Html>();

    html! {
        <div class="bg-base absolute flex flex-col gap-2 flex-nowrap w-16 h-full right-0 items-center pt-2">
            {elements_html}
        </div>
    }
}

#[derive(Properties, PartialEq)]
pub struct NavbarProps {
    pub elements: Vec<NavbarElemProps>,
}

#[derive(Properties, PartialEq)]
pub struct NavbarElemProps {
    pub icon: String,
    pub tooltip: String,
    pub link: String,
    pub spacer: bool,
}

#[function_component]
fn NavbarElem(props: &NavbarElemProps) -> Html {
    match props.spacer {
        false => html! {
            <a href={ props.link.clone() } class="outline outline-pink w-12 h-12 justify-content-center bg-surface0 shadow-lg hover:bg-green hover:outline-0 outline-2 flex items-center justify-center rounded-3xl hover:rounded-xl transition-all group text-white hover:text-base">
                <span class="absolute w-auto group-hover:p-2 outline outline-pink group-hover:m-2 p-0 m-0 min-w-max right-16 bg-surface0 rounded-xl text-white scale-0 group-hover:scale-100 transition-all">
                    {props.tooltip.clone()}
                </span>
                <i class={  format!("text-3xl {}", props.icon.clone() )}></i>
            </a>
        },
        true => html! {
            <div class="h-1 bg-overlay0 w-12 rounded-xl my-2 "></div>
        },
    }
}
