use sycamore::prelude::*;
use web_sys::Event;

#[derive(Prop)]
pub struct ButtonProps<F: FnMut(Event)> {
    pub onclick: F,
    #[builder(default)]
    pub text: String,
    #[builder(default)]
    pub icon: String,
}

#[component]
pub fn Button<'a, G: Html, F: 'a + FnMut(Event)>(cx: Scope<'a>, props: ButtonProps<F>) -> View<G> {
    let mut icon_class = String::from("mdi ");

    if !props.icon.is_empty() {
        icon_class.push_str(&props.icon);
    }

    view! { cx,
        button(on:click=props.onclick) {
            span(class=icon_class)
            span { (props.text) }
        }
    }
}

#[derive(Prop)]
pub struct TableProps<'a, G: Html> {
    pub headers: Vec<String>,

    pub children: Children<'a, G>,
}

#[component]
pub fn Table<'a, G: Html>(cx: Scope<'a>, props: TableProps<'a, G>) -> View<G> {
    let children = props.children.call(cx);

    view! { cx,
        table {
            thead {
                tr {
                    (View::new_fragment(props.headers.iter().cloned().map(|header| view! { cx,
                        th(scope="col") {
                            (header)
                        }
                    }).collect()))
                }
            }
            tbody {
                (children)
            }
        }
    }
}

#[derive(Prop)]
pub struct BlockProps<'a, G: Html> {
    pub title: String,
    pub children: Children<'a, G>,
}

#[component]
pub fn Block<'a, G: Html>(cx: Scope<'a>, props: BlockProps<'a, G>) -> View<G> {
    let children = props.children.call(cx);

    view! { cx,
        details {
            summary { (props.title) }
            p { (children) }
        }
    }
}