use crate::components::void_buttons::*;
use crate::components::void_title::*;
use crate::utils::prop_structs::VoidProps;
use crate::utils::{prop_structs::PoemChildren, user_prefs::ThemedComponent};
use dioxus::prelude::*;

pub fn PoemList(props: VoidProps) -> Element {
    let poem_list = props.poem_database.get_poem_list();
    rsx! {
        ul { class: "flex flex-col space-y-4",
            {poem_list.into_iter().map(|p| {
                let slug = format!("/poems/{}", p.0);
                rsx!{
                    NavigationButton { title: p.1, slug: slug, user_prefs: props.user_prefs.clone() }
                }
            })}
        }
    }
}

pub fn MakePoem(props: PoemChildren) -> Element {
    rsx! {
        div { class: "flex-col space-y-4",
            {props.children}
        }
    }
}

pub fn GetPoem(props: VoidProps) -> Element {
    let poem_database = props.poem_database;
    let slug = String::from(props.slug.clone().expect("No slug specified."));
    let poem_struct = poem_database.get_poem(slug.clone());
    rsx! {
        Title { title: poem_struct.title.clone(), is_html: true, user_prefs: props.user_prefs.clone() }
        MakePoem{
            PoemContent { slug: slug, poem_database: poem_database.clone(), user_prefs: props.user_prefs.clone() }
        }
    }
}

pub fn PoemContent(props: VoidProps) -> Element {
    let (user_theme, user_font) = props.user_prefs.get_pref_classes(ThemedComponent::Card);
    let slug = props
        .slug
        .as_ref()
        .expect("Received slug for poem selection.");
    let content = props
        .poem_database
        .poem_hashmap
        .get(slug)
        .expect("Grabbed poem stuct from databse.")
        .content
        .clone();
    let creation_date = props
        .poem_database
        .poem_hashmap
        .get(slug)
        .expect("Grabbed poem struct from database.")
        .creation_date
        .clone();
    let publish_string = "\u{003C}br\u{003E}\u{003C}br\u{003E}\u{003C}br\u{003E}Published: ";
    #[cfg(any(target_family = "unix", target_family = "windows"))]
    return rsx! {
        div { class: "flex p-2 mx-auto max-w-full justify-center",
            details { class: "group p-4 max-w-fit space-y-4 ring-4 {user_theme} {user_font}",
                summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
                }
                div { class: "flex flex-col space-y-4 py-4 ml-4 mr-4", dangerous_inner_html: "{content}{publish_string}{creation_date}"
                }
            }
        }
    };
    #[cfg(target_family = "wasm")]
    return rsx! {
        div { class: "flex p-2 mx-auto max-w-full justify-center",
            details { class: "group p-4 max-w-fit space-y-4 ring-4 {user_theme} {user_font}",
                summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
                }
                div { class: "flex flex-col space-y-4 py-4 ml-4 mr-4",
                    dangerous_inner_html: "{content}{publish_string}{creation_date}",
                }
            }
        }
    };
}
