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

pub fn PoemList(cx: Scope) -> 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 slug = format!("/poems/{}", p.1);
                rsx!{
                    NavigationButton { title: p.0, slug: slug }
                }
            })
        }
    })
}

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 }
        MakePoem{
            PoemContent { content: content, creation_date: creation_date }
        }
    })
}

pub fn PoemContent(cx: Scope<PoemData>) -> Element {
    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 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light",
                summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
                }
                div { class: "font-nerd 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 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light",
                summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
                }
                div { class: "font-nerd flex flex-col space-y-4 py-4", 
                    dangerous_inner_html: "{content}{creation_date}",
                }
            }
        }
    });
}