use yew::prelude::*;

#[derive(PartialEq)]
pub struct Repository {
    pub name: String,
    pub url: Option<String>,
}

#[derive(Properties, PartialEq)]
pub struct Props {
    pub name: AttrValue,
    pub repositories: Vec<Repository>,
    pub on_click: Option<Callback<usize>>,
}

pub enum Msg {
    Emit(usize),
}

pub struct UserPane;

impl Component for UserPane {
    type Message = Msg;
    type Properties = Props;

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Emit(i) => {
                ctx.props().on_click.as_ref().unwrap().emit(i);

                false
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <nav class={classes!("panel")}>
                <p class={classes!("panel-heading")}>
                    { &ctx.props().name }
                </p>

                {
                    for ctx.props().repositories.iter().enumerate().map(|(i, repo)| html! {
                        if let Some(url) = &repo.url {
                            <a
                                class={classes!("panel-block", "is-active")}
                                href={url.to_owned()}
                                target="_blank"
                            >
                                <span class={classes!("panel-icon")}>
                                    <i class={classes!("fa-solid", "fa-book")} />
                                </span>
                                { &repo.name }
                            </a>
                        } else {
                            <a
                                class={classes!("panel-block", "is-active")}
                                onclick={ctx.link().callback(move |_| Msg::Emit(i))}
                            >
                                <span class={classes!("panel-icon")}>
                                    <i class={classes!("fa-solid", "fa-book")} />
                                </span>
                                { &repo.name }
                            </a>
                        }
                    })
                }
            </nav>
        }
    }
}