use perseus::prelude::*;
use sycamore::{prelude::*, rt::Event};

use crate::{
    components::{
        loading::Loading, main_content_container::MainContentContainer, the_header::TheHeader,
    },
    global_state::AppStateRx,
};

fn profile_page<G: Html>(cx: BoundedScope) -> View<G> {
    let reactor = Reactor::<G>::from_cx(cx);
    let global_state = reactor.get_global_state::<AppStateRx>(cx);

    let api = global_state.api.get();
    let api_scope_ref = create_ref(cx, api);

    let dark_mode_class = create_memo(cx, || {
        if *global_state.dark_mode.get() {
            "dark"
        } else {
            ""
        }
    });

    let username = create_signal(cx, "".to_string());
    let email = create_signal(cx, "".to_string());

    let loading: &Signal<bool> = create_signal(cx, true);

    #[cfg(client)]
    spawn_local_scoped(cx, async move {
        let resp = api_scope_ref.get_profile().await.unwrap();
        username.set(resp.name);
        if let Some(em) = resp.email {
            email.set(em);
        }
        loading.set(false);
    });

    let displayed_email = create_memo(cx, move || {
        if email.get().is_empty() {
            "No email set".to_string()
        } else {
            (*email.get()).clone()
        }
    });

    view! {cx,
        main (class=format!("{} flex flex-1", dark_mode_class)) {
            div (class="flex-1 font-sans bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-100") {
                TheHeader()
                MainContentContainer(useless_prop=1) {
                    div(class="items-center m-auto w-2/5 min-w-70") {
                    h1(class="text-lg text-center") {
                        "Profile page"
                    }
                    (if !*loading.get() {
                        view! {cx,
                            p() {
                                b() {
                                    "Username: "
                                }
                                input(
                                    class="p-2 w-full rounded-md bg-slate-300 dark:bg-slate-800",
                                    disabled=true,
                                    value=username.get(),
                                )
                            }
                            p() {
                                b() {
                                    "Email: "
                                }
                                input(
                                    class="p-2 w-full rounded-md bg-slate-300 dark:bg-slate-800",
                                    disabled=true,
                                    value=displayed_email.get(),
                                )
                            }
                        }
                    } else {
                        view! {cx,
                            Loading()
                        }
                    })
                    }
                }
            }
        }
    }
}

pub fn get_template<G: Html>() -> Template<G> {
    Template::build("profile")
        .head(head)
        .view(profile_page)
        .build()
}

#[engine_only_fn]
fn head(cx: Scope) -> View<SsrNode> {
    view! {cx,
        title { "Fast Insiders - User Profile" }
    }
}