use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let tab_items = use_signal(|| vec!["a".to_string(), "b".to_string(), "c".to_string()]);

    rsx! {
        Tabs {
            tab_items,
        }

        // details
        for tab_item in tab_items() {
            br {}
            div {
                key: "{tab_item}",
                Detail { path: tab_item.clone() }
            }
        }
    }
}

#[component]
fn Tabs(tab_items: Signal<Vec<String>>) -> Element {
    rsx! {
        for tab_item in tab_items() {
            TabItem {
                tab_item: tab_item,
                tab_items,
            }
        }
    }
}

#[derive(Props, PartialEq, Clone)]
struct TabItemProps {
    #[props(default)]
    pub tab_item: String,

    #[props(default)]
    pub tab_items: Signal<Vec<String>>,
}

#[component]
fn TabItem(props: TabItemProps) -> Element {
    let tab_item = props.tab_item.clone();
    rsx! {
        button {
            onclick: move |_| {
                let mut tab_items = props.tab_items;
                tab_items.retain(|t| !t.eq(&tab_item));
            },
            {props.tab_item}
        }
    }
}

#[component]
fn Detail(path: String) -> Element {
    let default = path.clone();
    let content = use_signal(|| default);
    rsx! {
        {path}
        {content()}
    }
}