use crate::components::websocket::WebSocketContext;
use leptos::*;
use lib::*;

#[component]
pub fn Game() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let game_meta = expect_context::<ReadSignal<Option<GameMeta>>>();

    let (game_name, set_game_name) = create_signal("".to_string());
    let (game_host, set_game_host) = create_signal("".to_string());
    let (game_players, set_game_players) = create_signal(vec![]);
    let (game_czar, set_game_czar) = create_signal("".to_string());
    let (game_black, set_game_black) = create_signal("".to_string());
    let (game_white, set_game_white) = create_signal(vec![]);

    create_effect(move |_| {
        if let Some(game) = game_meta() {
            set_game_name(game.name.clone());
            set_game_host(game.host.clone());
            set_game_players(game.players.clone());
            set_game_czar(game.czar.clone());
            set_game_black(game.black.clone());
            set_game_white(game.white.clone());
        }
    });

    view! {
        <div class="p-1">
            <h2 class="text-2xl">Game</h2>
            <p>Name: {move || game_name}</p>
            <p>Host: {move || game_host}</p>
            <p>Players: {move || game_players}</p>
            <p>Czar: {move || game_czar}</p>
            <p>Black Card: {move || game_black}</p>
            <p>Your Cards: {move || game_white}</p>
        </div>
    }
}