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

#[component]
pub fn Auth() -> impl IntoView {
    let websocket = expect_context::<WebSocketContext>();
    let (username, set_username) = create_signal("".to_string());
    let user_context = expect_context::<ReadSignal<Option<UserUpdate>>>();
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;

    create_effect(move |_| {
        user_context.with(|new_user| {
            if let Some(user) = new_user {
                set_username(user.username.to_string());
            }
        })
    });

    let username_input_ref = create_node_ref::<Input>();
    let send_login = move |_| {
        if let Some(input) = username_input_ref.get() {
            if input.value() != String::from("") {
                logging::log!("send");
                websocket.send(
                    &to_string(&UserLogIn {
                        username: input.value(),
                    })
                    .unwrap(),
                );
                set_username.set("".to_string());
                input.set_value("");
            }
        }
    };

    // Clear user name on disconnect
    create_effect(move |_| {
        if !connected() {
            set_username(String::from(""));
        }
    });

    view! {
        <div class="p-1">
            <h2 class="text-2xl">Sign in:</h2>
            <p>Username:</p>
            <form onsubmit="return false" on:submit=send_login>
                <input
                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
                    placeholder=move || username.get()
                    node_ref=username_input_ref
                    disabled=move || !connected()
                />
                <br/>
                <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"
                    disabled=move || !connected()
                />
            </form>
        </div>
    }
}