use crate::{
    components::{messages::Messenger, Button, Table},
    state::Users,
};
use sycamore::{futures::spawn_local_scoped, prelude::*};

#[component]
pub fn UsersPage<'a, G: Html>(cx: Scope<'a>) -> View<G> {
    //let users = create_signal(cx, Vec::<User>::new());
    let messenger = use_context::<Messenger>(cx);
    let users = use_context::<Users>(cx);
    let headers = vec!["Username".into(), "Score".into(), "".into()];

    let score_edit = create_signal(cx, Option::<String>::None);
    let new_score = create_signal(cx, String::new());
    let new_username = create_signal(cx, String::new());

    let reload = move || {
        spawn_local_scoped(cx, async move {
            messenger.add_result(
                users.load().await,
                Option::<String>::None,
                Some("Failed to load users"),
            );
        });
    };

    reload();

    let ondelete = move |name: String| {
        move |_| {
            let name = name.clone();
            spawn_local_scoped(cx, async move {
                messenger.add_result(
                    users.delete(&name).await,
                    Some(format!("Deleted user {}", name)),
                    Some("Failed to delete user"),
                );
            });
        }
    };

    let oncheck = move |_| {
        spawn_local_scoped(cx, async move {
            if let (Some(name), Ok(score)) = (score_edit.get().as_ref(), new_score.get().parse()) {
                let score: i64 = score;
                messenger.add_result(
                    users.update_score(&name, score).await,
                    Some(format!("Updated score for user {}", name)),
                    Some("Failed to delete user"),
                );
            }
            score_edit.set(None);
        })
    };

    let onadd = move |_| {
        spawn_local_scoped(cx, async move {
            messenger.add_result(
                users.add(&new_username.get()).await,
                Some(format!("Added new user {}", new_username.get())),
                Some("Failed to add user"),
            );
        });
    };

    view! { cx,
        Button(text="Reload".into(), icon="mdi-refresh".into(), onclick=move |_| reload())
        Table(headers=headers) {
            Keyed(
                iterable=users.get(),
                view=move |cx, user| {
                    let user = create_ref(cx, user);
                    view! { cx,
                        tr {
                            td { (user.name) }
                            td {
                                (if Some(&user.name) == (*score_edit.get()).as_ref() { view! { cx,
                                    span(class="user-score") {
                                        input(bind:value=new_score)
                                    }
                                    Button(icon="mdi-check".into(), onclick=oncheck)
                                }} else { view! { cx,
                                    span(class="user-score") {
                                        (user.score)
                                    }
                                    Button(
                                        icon="mdi-pencil".into(),
                                        onclick=move |_| {
                                            score_edit.set(Some(user.name.clone()));
                                            new_score.set(user.score.to_string());
                                        }
                                    )
                                }})
                            }
                            td {
                                Button(icon="mdi-delete".into(),onclick=ondelete(user.name.clone()))
                            }
                        }
                    }
                },
                key=|user| (user.name.clone(), user.score.clone()),
            )
            tr {
                td {
                    span {
                        input(bind:value=new_username)
                    }
                }
                td {}
                td {
                    Button(icon="mdi-plus".into(),onclick=onadd)
                }
            }
        }
    }
}