path: root/src/components/message.rs

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, new_day: 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()}
    view! {
        {move || {
            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()
            }
        }}
        {move || {
            if new_day {
                view! {
                    <div class="new-day">
                        {move || {
                            message.get().timestamp().read().format("%Y-%m-%d").to_string()
                        }}
                    </div>
                }
                    .into_any()
            } else {
                view! {}.into_any()
            }
        }}
    }
}