use dioxus::prelude::*;
use dioxus_free_icons::{Icon, IconShape};

turf::style_sheet!("src/ui/components/button.scss");

#[derive(PartialEq, Clone, Props)]
struct _ButtonProps {
    children: Element,
    #[props(default = false)]
    focus: bool,
    id: Option<String>,
    onclick: Option<EventHandler<MouseEvent>>,
    style: String,
}

macro_rules! svg_text_icon {
    ($name:ident,$text:literal) => {
        #[derive(Copy, Clone, PartialEq)]
        struct $name;
        impl IconShape for $name {
            fn view_box(&self) -> &str {
                "0 0 250 50"
            }

            fn xmlns(&self) -> &str {
                "http://www.w3.org/2000/svg"
            }

            fn child_elements(&self) -> Element {
                rsx! {
                    text {
                        x: "50%",
                        y: "50%",
                        $text
                    }
                }
            }
        }
    };
}

macro_rules! svg_text_button {
    ($name:ident,$style:ident,$icon:ident) => {
        pub fn $name(props: ButtonProps) -> Element {
            rsx! {
                style { {STYLE_SHEET} },

                Button {
                    id: props.id,

                    style: {ClassName::$style},

                    onclick: move |event| {
                        if let Some(cb) = &props.onclick {
                            cb.call(event);
                        }
                    },

                    focus: props.focus,

                    Icon {
                        icon: $icon,
                    }
                }
            }
        }
    };
}

#[derive(PartialEq, Clone, Props)]
pub struct ButtonProps {
    #[props(default = false)]
    focus: bool,
    id: Option<String>,
    onclick: Option<EventHandler<MouseEvent>>,
    style: Option<String>,
    children: Element,
}

fn Button(props: ButtonProps) -> Element {
    rsx! {
        style { {STYLE_SHEET} },

        button {
            id: props.id,

            class: props.style,

            onmounted: move |evt| async move {
                _ = evt.set_focus(props.focus).await;
            },

            onclick: move |evt| {
                if let Some(cb) = &props.onclick {
                    cb.call(evt);
                }
            },

            {props.children},
        },
    }
}

svg_text_icon!(RegisterText, "REGISTER");
svg_text_button!(RegisterButton, REGISTER_BUTTON, RegisterText);

svg_text_icon!(LoginText, "LOGIN");
svg_text_button!(LoginButton, LOGIN_BUTTON, LoginText);

svg_text_icon!(SuccessText, "OK");
svg_text_button!(SuccessButton, SUCCESS_BUTTON, SuccessText);

svg_text_icon!(WarningText, "WARNING");
svg_text_button!(WarningButton, WARNING_BUTTON, WarningText);

svg_text_icon!(ErrorText, "ERROR");
svg_text_button!(ErrorButton, ERROR_BUTTON, ErrorText);