use crate::components::websocket::WebSocketContext;
use leptos::html::Input;
use leptos::*;
use leptos_use::core::ConnectionReadyState;
use lib::models::*;
use serde_json::to_string;

#[component]
pub fn Browser() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;

    let game_update_context = expect_context::<ReadSignal<Option<GamesUpdate>>>();
    let (active_games, set_active_games) = create_signal::<Vec<String>>(vec![]);

    let new_game_input_ref = create_node_ref::<Input>();

    // Game stuff
    let new_game = move |_| {
        (websocket.send)(
            &to_string(&NewGameRequest {
                name: new_game_input_ref.get().unwrap().value(),
            })
            .unwrap(),
        );
        new_game_input_ref.get().unwrap().set_value("");
    };

    create_effect(move |_| {
        game_update_context.with(move |games| {
            if let Some(games) = games {
                set_active_games(games.games.clone());
            }
        })
    });

    // Clear games list on disconnect
    create_effect(move |_| {
        if !connected() {
            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>
            <form onsubmit="return false" on:submit=new_game>
                <input
                    class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder="Name"
                    disabled=move || !connected()
                    node_ref=new_game_input_ref
                />
                <input
                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
                    type="submit"
                    disabled=move || !connected()
                    value="New Game"
                />
            </form>
        </div>
    }
}