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

#[component]
pub fn Debug() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let state_summary = expect_context::<ReadSignal<Option<ServerStateSummary>>>();

    // Signals
    let (online_users, set_online_users) = create_signal(0);
    let (active_games, set_active_games) = create_signal(0);

    // Websocket stuff
    let status = move || websocket.ready_state.get().to_string();
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
    let open_connection = move |_| {
        (websocket.open)();
    };

    let close_connection = move |_| {
        (websocket.close)();
        set_online_users(0);
        set_active_games(0);
    };

    // Update server info -> move this to a new component
    create_effect(move |_| {
        state_summary.with(move |state_summary| {
            if let Some(state_summary) = state_summary {
                set_online_users(state_summary.online_users);
                set_active_games(state_summary.active_games);
            }
        })
    });

    view! {
        <div class="w-auto">
            <hr/>
            <h2 class="p-1 text-2xl">Debug:</h2>
            <p class="p-1">"Connection Status: " {status}</p>
            <p class="p-1">"Users Online: " {online_users}</p>
            <p class="p-1">"Active Games: " {active_games}</p>
            <div class="p-1">
                <button on:click=open_connection disabled=move || connected()>
                    "Connect"
                </button>
                <button on:click=close_connection disabled=move || !connected()>
                    "Disconnect"
                </button>
            </div>
        </div>
    }
}