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 avatar = LocalResource::new(move || get_avatar(message.user.get().into()));
    let name = move || get_name(message.user.get().into(), 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.get().timestamp().read().format("%H:%M").to_string()}</div>
                    </div>
                    <div class="message-text">
                        {move || message.get().body().read().body.clone()}
                    </div>
                </div>
                <div class="right message-delivery">{move || message.get().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.get().timestamp().read().format("%H:%M").to_string()}
                </div>
                <div class="middle message-text">{move || message.get().body().read().body.clone()}</div>
                <div class="right message-delivery">{move || message.get().delivery().get().map(|delivery| view! { <Delivery delivery /> } ) }</div>
            </div>
        }.into_any()
    }
}