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

#[component]
pub fn Browser() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let game_update_context = expect_context::<ReadSignal<Option<GamesUpdate>>>();

    let (active_games, set_active_games) = create_signal::<Vec<String>>(vec![]);

    create_effect(move |_| {
        game_update_context.with(move |games| {
            if let Some(games) = games {
                set_active_games(games.games.clone());
                logging::log!("{:#?}",active_games());
            }
        })
    });

    // Clear games list on disconnect
    create_effect(move |_| {
        websocket.ready_state.with(move |status| {
            if *status == ConnectionReadyState::Closed {
                set_active_games(vec![]);
            }
        })
    });

    view! {
        <div class="p-1">
            <ul>
                <h2 class="text-2xl">Game Browser</h2>
                {move || active_games().into_iter().map(|n| view! { <li>{n}</li> }).collect_view()}
            </ul>
        </div>
    }
}