use std::ops::Deref;

use filamento::{chat::Chat, roster::{Contact, ContactStoreFields}, user::{User, UserStoreFields}};
use leptos::prelude::*;
use reactive_stores::{ArcStore, Store};
use tracing::debug;

use crate::{chat::MacawChat, components::{avatar::AvatarWithPresence, sidebar::Open}, contact::MacawContact, open_chats::{OpenChatsPanel, OpenChatsPanelStoreFields}, user::get_name};

#[component]
pub fn RosterListItem(contact: MacawContact) -> impl IntoView {
    let contact_contact: Store<Contact> = contact.contact;
    let name = move || get_name(contact.user.get().unwrap().into(), false);

    let open_chats: Store<OpenChatsPanel> =
        use_context().expect("no open chats panel store in context");

    // TODO: why can this not be in the closure?????
    // TODO: not good, as overwrites preexisting chat state with possibly incorrect one...
    let chat = Chat {
        correspondent: contact.user.get().unwrap().jid().get(),
        have_chatted: false,
    };
    let chat = MacawChat::got_chat_and_user(chat, contact.user.get().unwrap().get());

    let open_chat = move |_| {
        debug!("opening chat");
        open_chats.update(|open_chats| open_chats.open(chat.clone()));
    };

    let open = move || {
        if let Some(open_chat) = &*open_chats.chat_view().read() {
            debug!("got open chat: {:?}", open_chat);
            if *open_chat == *contact.user.get().unwrap().jid().read() {
                return Open::Focused;
            }
        }
        if let Some(_backgrounded_chat) = open_chats
            .chats()
            .read()
            .get(contact.user.get().unwrap().jid().read().deref())
        {
            return Open::Open;
        }
        Open::Closed
    };
    let focused = move || open().is_focused();
    let open = move || open().is_open();

    view! {
        <div class="roster-list-item" class:open=move || open() class:focused=move || focused() on:click=open_chat>
            <AvatarWithPresence user=contact.user.get().unwrap().into() />
            <div class="item-info">
                <div class="main-info"><p class="name">{name}<span class="jid"> - {move || contact_contact.user_jid().read().to_string()}</span></p></div>
                <div class="sub-info">{move || contact_contact.subscription().read().to_string()}</div>
            </div>
        </div>
    }
}