use super::icons::Icon;
use crate::components::outlined_box::OutlinedBox;
use crate::gradient::Gradient;
use leptos::prelude::*;
use web_sys::MouseEvent;

#[component]
pub fn Button(
    #[prop(into, optional)] icon: MaybeProp<Icon>,

    #[prop(into)] text: Signal<String>,

    #[prop(optional)] color: Gradient,

    #[prop(into, optional)] highlight: MaybeProp<bool>,

    onclick: impl FnMut(MouseEvent) + 'static,
) -> impl IntoView {
    let margin = "mx-2 my-1 sm:mx-5 sm:my-2.5";

    let icon_view = icon.get().map(|i| {
        let icon_view = i.into_view();
        let mut classes = "self-center".to_string();
        classes.push(' ');
        classes.push_str(margin);
        classes.push(' ');
        classes.push_str(color.class_text());

        view! { <div class=classes>{icon_view}</div> }
    });

    let separator = icon.get().is_some().then(|| {
        let mut classes = "w-0.5 bg-gradient-to-br min-w-0.5".to_string();
        classes.push(' ');
        classes.push_str(color.class_from());
        classes.push(' ');
        classes.push_str(color.class_to());

        view! { <div class=classes /> }
    });

    let text_view = {
        let mut classes = "self-center uppercase w-full text-sm sm:text-base md:text-lg font-thin".to_string();
        classes.push(' ');
        classes.push_str(margin);

        view! { <div class=classes>{text.get()}</div> }
    };

    view! {
        <button on:click=onclick type="button" class="hover:brightness-125 active:brightness-90">
            <OutlinedBox color highlight>
                <div class="flex items-stretch">{icon_view} {separator} {text_view}</div>
            </OutlinedBox>
        </button>
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn baseline() {
        let text = "foo";
        let onclick = |_| {};

        view! { <Button text onclick /> };
    }

    #[test]
    fn simple() {
        let icon = Icon::ForwardSolid;
        let text = "foo";
        let onclick = |_| {};

        view! { <Button icon text onclick /> };
    }
}
