use filamento::chat::MessageStoreFields;
use leptos::prelude::*;
use reactive_stores::{ArcStore, Store};

use crate::{message::MacawMessage, user::{get_avatar, get_name, NO_AVATAR}};

use super::icon::Delivery;

#[component]
pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoView {
    let message_message: Store<filamento::chat::Message> =
        <ArcStore<filamento::chat::Message> as Clone>::clone(&message.get()).into();
    let message_user = <ArcStore<filamento::user::User> as Clone>::clone(&message.user.get()).into();
    let avatar = LocalResource::new(move || get_avatar(message_user));
    let name = move || get_name(message_user, false);

    // TODO: chrono-humanize?
    // TODO: if final, show delivery not only on hover.
    // {move || message_message.delivery().read().map(|delivery| delivery.to_string()).unwrap_or_default()}
    if major {
        view! {
            <div class:final=r#final class="chat-message major">
                    <div class="left">
                    <Transition fallback=|| view! { <img class="avatar" src=NO_AVATAR /> } >
                        <img class="avatar" src=move || avatar.get() />
                    </Transition>
                    </div>
                <div class="middle">
                    <div class="message-info">
                        <div class="message-user-name">{name}</div>
                        <div class="message-timestamp">{move || message_message.timestamp().read().format("%H:%M").to_string()}</div>
                    </div>
                    <div class="message-text">
                        {move || message_message.body().read().body.clone()}
                    </div>
                </div>
                <div class="right message-delivery">{move || message_message.delivery().get().map(|delivery| view! { <Delivery class:light=true delivery /> } ) }</div>
            </div>
        }.into_any()
    } else {
        view! {
            <div class:final=r#final class="chat-message minor">
                <div class="left message-timestamp">
                    {move || message_message.timestamp().read().format("%H:%M").to_string()}
                </div>
                <div class="middle message-text">{move || message_message.body().read().body.clone()}</div>
                <div class="right message-delivery">{move || message_message.delivery().get().map(|delivery| view! { <Delivery delivery /> } ) }</div>
            </div>
        }.into_any()
    }
}