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

#[derive(Properties, PartialEq)]
pub struct TabPanelProps {
    pub tabs: Vec<(char, Html)>,
}

#[function_component(TabPanel)]
pub fn tab_panel_props(props: &TabPanelProps) -> Html {
    let active_tab = use_state_eq(|| props.tabs.first().map(|(k, _)| *k).unwrap_or('0'));
    html! {
      <div class="d-flex flex-column h-100">
        <ul class="nav nav-tabs">
        {props.tabs.iter().map(|(c, _)| {
            if !props.tabs.is_empty() && !props.tabs.iter().any(|t| t.0 == *active_tab) {
                active_tab.set(props.tabs.first().map(|v| v.0).unwrap_or('0'));
            }
            let class_name = if *c == *active_tab { "nav-link active" } else { "nav-link" };
            let c_click: char = *c;
            let active_tab_click = active_tab.clone();
            let on_click = Callback::from(move |_| {
                active_tab_click.set(c_click);
            });
          html! {
              <li class="nav-item" key={format!("nav-{}", c)}>
                <a class={class_name} onclick={on_click} href="#">{c}</a>
              </li>
          }}).collect::<Vec<_>>()
        }
        </ul>
        {props.tabs.iter().map(|(c, v)| {
          let class_name = if *c == *active_tab { "termtreewrapper"} else { "d-none"};
          html! {
            <div class={class_name} key={format!("content-{}", c)}>
              {v.clone()}
            </div>
          }
        }).collect::<Vec<_>>()}
      </div>
    }
}