use super::super::utils::{
    prop_structs::{ButtonProps, ContentChildren},
    user_prefs::{ThemedComponent, UserPrefs},
};
use dioxus::prelude::*;

#[cfg(target_family = "wasm")]
use dioxus_router::Link;

pub fn BackToHomePage(cx: Scope<UserPrefs>) -> Element {
    let (user_theme, user_font) = cx.props.clone().get_pref_classes(ThemedComponent::Button);
    #[cfg(any(target_family = "windows", target_family = "unix"))]
    return cx.render(rsx!{
        a { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
            href: "/",
            p {
                "Back to the homepage"
            }
        }
    });
    #[cfg(target_family = "wasm")]
    return cx.render(rsx!{
        Link { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
            to: "/",
            p {
                "Back to the homepage"
            }
        }
    });
}

pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
    let (user_theme, mut user_font) = cx
        .props
        .user_prefs
        .clone()
        .get_pref_classes(ThemedComponent::Button);
    let title = cx.props.title.clone();
    let title_ref = title.as_str();
    let slug = cx.props.slug.clone();
    let slug_ref = slug.as_str();

    match &cx.props.override_font {
        Some(font) => user_font = font.clone(),
        None => (),
    }

    #[cfg(any(target_family = "windows", target_family = "unix"))]
    return cx.render(rsx!{
        a { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
            href: "{slug_ref}",
            "{title_ref}"
        }
    });
    #[cfg(target_family = "wasm")]
    return cx.render(rsx!{
        Link { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
            to: "{slug_ref}",
            div {
                dangerous_inner_html: "{title_ref}",
            }
        }
    });
}

pub fn ButtonGroup<'a>(cx: Scope<'a, ContentChildren<'a>>) -> Element {
    cx.render(rsx! {
        div { class: "flex md:flex-row md:space-y-0 flex-col space-y-4",
            &cx.props.children
        }
    })
}