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(cx: Scope<VoidProps>) -> Element {
    let poem_list = cx.props.poem_database.get_poem_list();
    cx.render(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: cx.props.user_prefs.clone() }
                }
            })
        }
    })
}

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

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

pub fn PoemContent(cx: Scope<VoidProps>) -> Element {
    let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
    let slug = cx
        .props
        .slug
        .as_ref()
        .expect("Received slug for poem selection.");
    let content = &cx
        .props
        .poem_database
        .poem_hashmap
        .get(slug)
        .expect("Grabbed poem stuct from databse.")
        .content
        .clone();
    let creation_date = &cx
        .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 cx.render(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", "{content}{publish_string}{creation_date}"
                }
            }
        }
    });
    #[cfg(target_family = "wasm")]
    return cx.render(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}",
                }
            }
        }
    });
}