use crate::components::websocket::WebSocketContext;
use html::{Input, Textarea};
use leptos::*;
use leptos_use::core::ConnectionReadyState;
use lib::models::*;

#[component]
pub fn Chat() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();

    // Chat stuff
    let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
    let chat_history_ref = create_node_ref::<Textarea>();
    let chat_input_ref = create_node_ref::<Input>();

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

    // Connection status updates in chat window
    create_effect(move |_| {
        websocket.ready_state.with(move |state| match *state {
            ConnectionReadyState::Connecting => {
                update_chat_history(
                    &set_chat_history,
                    "Connecting to game server...\n".to_string(),
                );
            }
            ConnectionReadyState::Open => {
                update_chat_history(&set_chat_history, "Connected!\n".to_string());
            }
            ConnectionReadyState::Closing => {
                update_chat_history(&set_chat_history, "Disconnecting...\n".to_string());
            }
            ConnectionReadyState::Closed => {
                update_chat_history(&set_chat_history, "Disconnected.\n".to_string());
            }
        })
    });

    // let chat = move || {
    //     if let Some(ye) = chat_input_ref.get() {
    //         &websocket.send(&ye.value());
    //     };
    // };

    // This should be done elsewhere
    create_effect(move |_| {
        websocket.message.with(move |message_raw| {
            // Send all messages as strings into chat box
            if let Some(message) = message_raw {
                if let Ok(_game) = serde_json::from_str::<Game>(message) {
                    logging::log!("Game object received at chat component");
                } else if let Ok(_state_summary) =
                    serde_json::from_str::<ServerStateSummary>(message)
                {
                    logging::log!("State Summary received at chat component");
                } else {
                    update_chat_history(&set_chat_history, format!("{}\n", message));
                }
            }
        })
    });

    let send_message = move |_| {
        websocket.send(&serde_json::to_string(&ChatMessage {
            text: chat_input_ref.get().unwrap().value(),
        }).unwrap());
        chat_input_ref.get().unwrap().set_value("");
        logging::log!("Send Message");
    };

    // Keep chat scrolled to the bottom
    create_effect(move |_| {
        chat_history.with(move |_| {
            // Scroll chat textarea to bottom
            if let Some(hist) = chat_history_ref.get() {
                hist.set_scroll_top(hist.scroll_height());
            }
        })
    });

    view! {
        <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/>
            <span>
                <input
                    class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder="talk shit..."
                    node_ref=chat_input_ref
                    on:change=send_message.clone()
                />
                <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"
                    value="Send"
                    on:change=send_message.clone()
                />
            </span>
            <br/>
        </div>
    }
}