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

#[component]
pub fn Chat() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let chat_context = expect_context::<ReadSignal<Option<ChatMessage>>>();
    let chat_update_context = expect_context::<ReadSignal<Option<ChatUpdate>>>();

    // Chat stuff
    let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
    let (users, set_users) = 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());
            }
        })
    });

    // Handle incoming chat messages
    create_effect(move |_| {
        chat_context.with(move |chat_message| {
            if let Some(message) = chat_message {
                update_chat_history(&set_chat_history, format!("{}\n", message.text));
            }
        })
    });

    // Handle users
    create_effect(move |_| {
        chat_update_context.with(move |chat_update| {
            if let Some(update) = chat_update {
                set_users(update.users.clone());
            }
        })
    });

    // Clear user list on disconnect
    create_effect(move |_| {
        websocket.ready_state.with(move |status| {
            if *status == ConnectionReadyState::Closed {
                set_users(vec![]);
            }
        })
    });

    // Handle sending messages
    let send_message = move |_| {
        websocket.send(
            &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>
            <span class="flex">
            <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>
            <ul>
            <h2 class="text-2xl">Users:</h2>
            {move || users().into_iter().map(|n| view! {<li>{n}</li>}).collect_view()}
            </ul>
            </span>

            <br/>
            <span>
            <form
                onsubmit="return false"
                on:submit=send_message
            >
                <input
                    class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder="talk shit..."
                    node_ref=chat_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"
                    value="Send"
                />
            </form>
            </span>
            <br/>
        </div>
    }
}