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

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

    let (game_id, set_game_id) = create_signal("".to_string());
    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(), 0u8));
    let (game_white, set_game_white) = create_signal(vec![]);
    let (selected_card, set_selected_card) = create_signal("".to_string());

    create_effect(move |_| {
        if let Some(game) = game_meta() {
            set_game_id(game.uuid.clone());
            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());
        }
    });

    create_effect(move |_| {
        logging::log!("{:#?}", selected_card());
        websocket.send(
            &to_string(&PlayerMoveRequest {
                game_id: game_id(),
                card_id: selected_card(),
            })
            .unwrap(),
        )
    });

    view! {
        <div class="p-1">
            <div class="relative">
                <h2 class="text-2xl">Game</h2>
                <span>
                    <p>Name: {move || game_name()}</p>
                    <p>Host: {move || game_host()}</p>
                    <p>Czar: {move || game_czar()}</p>
                </span>
                <span class="absolute top-0 right-0">
                    <p>Players:</p>
                    <ul>
                        {move || {
                            game_players()
                                .iter()
                                .map(|player| view! { <li>{player}</li> })
                                .collect_view()
                        }}

                    </ul>
                </span>
            </div>
            <div class="relative m-auto w-40 h-60 text-white bg-black rounded-lg">
                <p class="p-4">{move || game_black().0}</p>
                <p class="absolute right-4 bottom-4">Pick: {move || game_black().1}</p>
            </div>
            <div class="inline-flex flex-wrap justify-center">
                {move || {
                    game_white()
                        .iter()
                        .map(|card| {
                            view! {
                                <div class="relative m-2 w-40 h-60 text-black bg-white rounded-lg">
                                    <p class="p-4">{&card.text}</p>
                                    <button
                                        class="absolute w-full h-full opacity-10 left-0 top-0"
                                        type="button"
                                        value=card.uuid.clone()
                                        on:click=move |e| {
                                            set_selected_card(event_target_value(&e))
                                        }
                                    ></button>
                                </div>
                            }
                        })
                        .collect_view()
                }}

            </div>
        </div>
    }
}