use crate::components::cards::*;
use crate::components::websocket::WebSocketContext;
use leptos::*;
use lib::*;
use serde_json::to_string;
use std::collections::{BTreeSet, HashMap};

#[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_cards, set_selected_cards) =
        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
    let (selected_cards_ordered, set_selected_cards_ordered) = create_signal::<Vec<String>>(vec![]);
    let (player_hand, set_player_hand) =
        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
    let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
    provide_context::<WriteSignal<String>>(set_card_clicked);

    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());
            for card in game.white {
                set_player_hand.update(|hand| {
                    hand.insert(card.uuid.clone(), card.clone());
                })
            }
        }
    });

    // Move cards back and forth from hand to selected when clicked
    create_effect(move |_| {
        // Move the card
        if player_hand().contains_key(&card_clicked()) {
            set_selected_cards.update(|cards| {
                cards.insert(
                    card_clicked(),
                    set_player_hand
                        .try_update(|cards| cards.remove(&card_clicked()))
                        .unwrap()
                        .unwrap(),
                );
            });

            // Track ordering
            set_selected_cards_ordered.update(|list| {
                list.push(card_clicked());
            });
        } else if selected_cards().contains_key(&card_clicked()) {
            // Update tracking before moving the card or else the view tries to display a card that
            // doesn't exist
            set_selected_cards_ordered.update(|list| {
                list.remove(
                    list.iter()
                        .position(|card| *card == card_clicked())
                        .unwrap(),
                );
            });

            set_player_hand.update(|cards| {
                cards.insert(
                    card_clicked(),
                    set_selected_cards
                        .try_update(|cards| cards.remove(&card_clicked()))
                        .unwrap()
                        .unwrap(),
                );
            });
        }
    });

    // create_effect(move |_| {
    //     logging::log!("{:#?}", selected_cards());
    //     websocket.send(
    //         &to_string(&PlayerMoveRequest {
    //             game_id: game_id(),
    //             card_ids: selected_cards(),
    //         })
    //         .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>
            <span class="flex">
                <BlackCard card_data=game_black />

                // Card selection
                <For
                    each=move || selected_cards_ordered()
                    key=move |card| selected_cards().get(card).unwrap().uuid.clone()
                    children=move |card| {
                        view! {
                            <WhiteCard card_data=selected_cards().get(&card).unwrap().clone() />
                        }
                    }
                />
            </span>
            <div class="inline-flex flex-wrap justify-center">
                <For
                    each=move || player_hand()
                    key=|card| card.0.clone()
                    children=move |card| {
                        view! { <WhiteCard card_data=card.1 /> }
                    }
                />

            </div>
        </div>
    }
}