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

pub fn PoemList(cx: Scope<UserPrefs>) -> Element {
    let poem_list = helpers::get_poem_list();
    cx.render(rsx! {
        ul { class: "flex flex-col space-y-4",
            poem_list.into_iter().map(|p| {
                let user_prefs = cx.props.clone();
                let slug = format!("/poems/{}", p.1);
                rsx!{
                    NavigationButton { title: p.0, slug: slug, user_prefs: 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<PoemData>) -> Element {
    let slug = String::from(cx.props.slug.clone().expect("No slug specified."));
    let (title, content, creation_date) = helpers::get_poem(slug.clone());
    cx.render(rsx! {
        Title { title: title, is_html: true, user_prefs: cx.props.user_prefs.clone() }
        MakePoem{
            PoemContent { content: content, creation_date: creation_date, user_prefs: cx.props.user_prefs.clone() }
        }
    })
}

pub fn PoemContent(cx: Scope<PoemData>) -> Element {
    let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
    let content = cx.props.content.clone().expect("No content specified.");
    let creation_date = cx
        .props
        .creation_date
        .clone()
        .expect("No creation date specified.");
    #[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", "{content}{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", 
                    dangerous_inner_html: "{content}{creation_date}",
                }
            }
        }
    });
}