use leptos::prelude::*;
use open_chat::OpenChatView;
use reactive_stores::{ArcStore, Store};

use crate::open_chats::{OpenChatsPanel, OpenChatsPanelStoreFields};

// TODO: multiple panels
// pub struct OpenChats {
//     panels:
// }

#[component]
pub fn OpenChatsPanelView() -> impl IntoView {
    let open_chats: Store<OpenChatsPanel> = use_context().expect("no open chats panel in context");

    // TODO: tabs
    // view! {
    //     {move || {
    //         if open_chats.chats().read().len() > 1 {
    //             Some(
    //                 view! {
    //                     <For
    //                         each=move || open_chats.chats().get()
    //                         key=|(jid, _)| jid.clone()
    //                         let(chat)
    //                     ></For>
    //                 },
    //             )
    //         } else {
    //             None
    //         }
    //     }}
    // }
    view! {
        <div class="open-chat-views">
            {move || {
                if let Some(open_chat) = open_chats.chat_view().get() {
                    if let Some(open_chat) = open_chats.chats().read().get(&open_chat) {
                        view! { <OpenChatView chat=open_chat.clone().into() /> }.into_any()
                    } else {
                        view! {}.into_any()
                    }
                } else {
                    view! {}.into_any()
                }
            }}
        </div>
    }
}

mod open_chat {
    use filamento::chat::{Chat, ChatStoreFields};
    use leptos::prelude::*;
    use reactive_stores::{ArcStore, Store};

    use crate::{chat::MacawChat, components::{chat_header::ChatViewHeader, message_composer::ChatViewMessageComposer, message_history_buffer::MessageHistoryBuffer}};

    #[component]
    pub fn OpenChatView(chat: MacawChat) -> impl IntoView {
        view! {
            <div class="open-chat-view">
                <ChatViewHeader chat=chat.clone() />
                <MessageHistoryBuffer chat=chat.clone() />
                {move || {
                    let chat_jid = chat.get().correspondent().get();
                    view! {
                        <ChatViewMessageComposer chat=chat_jid />
                    }
                }}
            </div>
        }
    }
}