use crate::components::websocket::WebSocketContext;
use leptos::prelude::*;
use leptos_use::core::ConnectionReadyState;
use lib::*;
use serde_json::to_string;

#[component]
pub fn Browser() -> impl IntoView {
    // Websocket stuff
    let websocket = expect_context::<WebSocketContext>();
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;

    let tx = websocket.clone();
    let (websocket_send, set_websocket_send) = signal("".to_string());

    Effect::new(move |_| {
        if websocket_send() != "".to_string() {
            tx.send(&websocket_send());
        }
    });

    // Browser stuff
    let game_browser_context = expect_context::<ReadSignal<Vec<GameBrowserMeta>>>();
    let (join_id, set_join_id) = signal("".to_string());
    let (delete_id, set_delete_id) = signal("".to_string());

    Effect::new(move |_| {
        set_websocket_send(to_string(&GameJoinRequest { id: join_id() }).unwrap());
    });

    Effect::new(move |_| {
        set_websocket_send(
            to_string(&GameDeleteRequest {
                delete_game_id: delete_id(),
            })
            .unwrap(),
        );
    });

    view! {
        <div class="my-2">
            <h2 class="text-2xl">Game Browser</h2>
            <Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
                <Show
                    when=move || { game_browser_context().len() > 0 }
                    fallback=|| {
                        view! { "No games to show right now.. Maybe you should create one!" }
                    }
                >
                    <p>"Yes, the delete button works. Please don't abuse it."</p>
                    <div>
                        <table class="min-w-full border border-collapse table-auto">
                            <thead>
                                <tr>
                                    <th class="border-b">Name</th>
                                    <th class="border-b">Host</th>
                                    <th class="border-b">Players</th>
                                    <th class="border-b">Card Packs</th>
                                    <th class="border-b"></th>
                                </tr>
                            </thead>

                            // This rebuilds the entire browser each time it runs but using <For /> won't update the children if the id doesn't change
                            {game_browser_context()
                                .iter()
                                .cloned()
                                .map(|game| {
                                    view! {
                                        <tr>
                                            <td class="text-center border-b">{game.name}</td>
                                            <td class="text-center border-b">{game.host}</td>
                                            <td class="text-center border-b">{game.players}</td>
                                            <td class="text-center border-b">{game.packs.len()}</td>
                                            <td class="text-center border-b">
                                                <button
                                                    type="button"
                                                    value=game.uuid.clone()
                                                    on:click=move |e| {
                                                        set_join_id(event_target_value(&e));
                                                    }
                                                >
                                                    Join
                                                </button>
                                                <button
                                                    type="button"
                                                    value=game.uuid.clone()
                                                    on:click=move |e| {
                                                        set_delete_id(event_target_value(&e));
                                                    }
                                                >
                                                    Delete
                                                </button>
                                            </td>
                                        </tr>
                                    }
                                })
                                .collect_view()}
                        </table>
                    </div>
                </Show>
            </Show>
        </div>
    }
}