use filamento::chat::Body;
use jid::BareJID;
use leptos::{html::Div, prelude::*, task::spawn_local};

use crate::client::Client;

#[component]
pub fn ChatViewMessageComposer(chat: BareJID) -> impl IntoView {
    let message_input: NodeRef<Div> = NodeRef::new();

    // TODO: load last message draft
    let new_message = RwSignal::new("".to_string());
    let client: Client = use_context().expect("no client in context");
    let client = RwSignal::new(client);
    let (shift_pressed, set_shift_pressed) = signal(false);

    let send_message = move || {
        let value = chat.clone();
        spawn_local(async move {
            match client
                .read()
                .send_message(
                    value,
                    Body {
                        body: new_message.get(),
                    },
                )
                .await
            {
                Ok(_) => {
                    new_message.set("".to_string());
                    message_input
                        .write()
                        .as_ref()
                        .expect("message input div not mounted")
                        .set_text_content(Some(""));
                }
                Err(e) => tracing::error!("message send error: {}", e),
            }
        })
    };

    let _focus = Effect::new(move |_| {
        if let Some(input) = message_input.get() {
            let _ = input.focus();
            // TODO: set the last draft
            input.set_text_content(Some(""));
            // input.style("height: 0");
            // let height = input.scroll_height();
            // input.style(format!("height: {}px", height));
        }
    });

    // let on_input = move |ev: Event| {
    //     // let keyboard_event: KeyboardEvent = ev.try_into().unwrap();
    //     debug!("got input event");
    //     let key= event_target_value(&ev);
    //     new_message.set(key);
    //     debug!("set new message");
    // };
    //

    // TODO: placeholder
    view! {
        <form
            class="new-message-composer panel"
        >
            <div
                class="text-box"
                on:input:target=move |ev| new_message.set(ev.target().text_content().unwrap_or_default())
                node_ref=message_input
                contenteditable
                on:keydown=move |ev| {
                    match ev.key_code() {
                        16 => set_shift_pressed.set(true),
                        13 => if !shift_pressed.get() {
                            ev.prevent_default();
                            send_message();
                        }
                        _ => {}
                        // debug!("shift pressed down");
                    }
                }
                on:keyup=move |ev| {
                    match ev.key_code()  {
                        16 => set_shift_pressed.set(false),
                        _ => {}
                        // debug!("shift released");
                    }
                }
            ></div>
            // <input hidden type="submit" />
        </form>
    }
}