use html::Textarea;
use leptos::*;
use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
use lib::models::*;
use serde_json::to_string;

#[component]
pub fn Websocket() -> impl IntoView {
    let UseWebsocketReturn {
        ready_state,
        message,
        send,
        open,
        close,
        ..
    } = use_websocket("ws://0.0.0.0:3030/websocket");

    // Websocket stuff
    // let send_message = move |_| {
    //     send("Hello, world!");
    // };

    let status = move || ready_state.get().to_string();

    let connected = move || ready_state.get() == ConnectionReadyState::Open;

    let open_connection = move |_| {
        open();
    };

    let close_connection = move |_| {
        close();
    };

    let fake_new_game_request = NewGameRequest {
        name: String::from("Ligma"),
        host: CAHPlayer {
            name: String::from("Adam"),
            role: PlayerRole::Host,
            white: vec![],
            black: vec![],
        },
        packs: vec![0],
    };

    let new_game_test = move |_| {
        send(&to_string(&fake_new_game_request).unwrap());
    };

    // Chat stuff
    let chat_history_ref = create_node_ref::<Textarea>();

    let (chat_history, set_chat_history) = create_signal(vec![]);

    fn update_chat_history(&history: &WriteSignal<Vec<String>>, message: String) {
        let _ = &history.update(|history: &mut Vec<_>| history.push(message));
    }

    // fn message_handler(message) {
    //
    // }

    // handle incoming messages
    create_effect(move |_| {
        message.with(move |message| {
            // Send all messages as strings into chat box
            if let Some(m) = message {
                update_chat_history(&set_chat_history, format!("{}\n", m));

                // Scroll chat textarea to bottom
                if let Some(hist) = chat_history_ref.get() {
                    hist.set_scroll_top(hist.scroll_height());
                }
            }
        })
    });

    // Login stuff
    let (username, _set_username) = create_signal("ligma");

    view! {
        <div class="w-auto bg-slate-500">
            <hr/>
            <h2 class="text-2xl">Connection</h2>
            <p class="p-1">"status: " {status}</p>
            <div class="p-1">
                <button on:click=open_connection disabled=connected>
                    "Connect"
                </button>
                <button on:click=close_connection disabled=move || !connected()>
                    "Disconnect"
                </button>
            </div>
            <hr/>
            <div class="p-1">
                <h2 class="text-2xl">Sign in</h2>
                <p>Username:</p>
                <input
                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder={move || username.get()}
                />
            </div>
            <hr />
            <div class="p-1">
                <h2 class="text-2xl">Chat</h2>
                <textarea
                    node_ref=chat_history_ref
                    class="w-96 h-60 font-mono rounded-sm resize-none bg-slate-900 text-slate-200"
                    readonly=true
                    wrap="soft"
                >
                    {move || chat_history.get()}
                </textarea>
                <br/>
                <input
                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder="talk shit..."
                />
                <br/>
                // <button on:click=send_message disabled=move || !connected()>
                //     "Send"
                // </button>
                <br />
                <button on:click=new_game_test disabled=move || !connected()>
                    "Test New Game"
                </button>
            </div>
            <hr/>
        </div>
    }
}