<script setup lang="ts">
// imports

import useGetAccount from "~/composables/api/account/useGetAccount";
import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";

// types

type Props = {
    is_user: boolean;
    date: string;
    message: string;
    files: ServerFile[];
};

// props

const props = defineProps<Props>();

const { is_user, files, date } = toRefs(props);

// state

const timeAgo = usePersianTimeAgo(new Date(date.value));

// queries

const { data: account } = useGetAccount();

// computed

const profile = computed(() => {
    return is_user.value
        ? account.value?.profile_photo
            ? account.value?.profile_photo
            : "/img/avatars/1.jpg"
        : "/img/avatars/3.jpg";
});

const username = computed(() => {
    return is_user.value ? `${account.value?.first_name} ${account.value?.last_name}` : "ادمین پشتیبانی هی ملز";
});
</script>

<template>
    <div
        class="w-full flex flex-col justify-center gap-2"
        :class="is_user ? 'items-start' : 'items-end'"
    >
        <div
            class="w-full lg:w-1/2 bg-slate-50 border border-slate-200 rounded-xl p-5 flex items-start"
            :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
        >
            <div class="w-2/12 flex items-start justify-start">
                <NuxtImg
                    :src="profile"
                    loading="lazy"
                    fetch-priority="low"
                    class="size-16 rounded-full"
                />
            </div>

            <div class="w-10/12 flex flex-col items-start pt-2">
                <div class="flex flex-col gap-0.5 w-full">
                    <p
                        class="text-[10px] font-semibold text-[#1677FF] line-clamp-1 text-right"
                        style="direction: ltr"
                    >
                        {{ timeAgo }}
                    </p>
                    <p class="text-xs font-semibold text-dynamic-secondary line-clamp-1">
                        {{ username }}
                    </p>
                </div>
                <div class="py-2 text-start">
                    {{ message }}
                </div>
            </div>
        </div>

        <div class="w-1/2 grid grid-cols-2 lg:grid-cols-3 gap-2">
            <Attachment
                v-for="(attachment, index) in files"
                :index="index + 1"
                :link="attachment.file_link"
                :size="attachment.size"
            />
        </div>
    </div>
</template>

<style scoped></style>
