path: root/src/components/message.rs

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

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

use super::icon::Delivery;

#[component]
pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoView {
    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 || message.user.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()
    }
}