<script setup lang="ts">
import useGetAccount from "~/composables/api/account/useGetAccount";

// types

type Props = {
    id: number;
    reverse?: boolean;
    content: string;
    isLast?: boolean;
    loadingContent?: boolean;
};

// props

const props = defineProps<Props>();
const { reverse, id, isLast, content } = toRefs(props);

// emit

const emit = defineEmits(["textUpdate"]);

// state

const { $gsap: gsap } = useNuxtApp();
const { data: account } = useGetAccount();

// methods

const showMessage = () => {
    gsap.fromTo(
        `#message-container-${id.value}`,
        {
            rotateX: -50,
            translateY: -40,
            opacity: 0,
        },
        {
            rotateX: 0,
            translateY: 0,
            opacity: 1,
            duration: 0.5,
            ease: "expo.out",
        }
    );
};

// lifecycle

onMounted(() => {
    if (isLast.value) {
        showMessage();
    }

    if (reverse.value && isLast.value) {
        gsap.fromTo(
            `#chat-message-content-${id.value}`,
            {
                text: "",
                ease: "none",
            },
            {
                text: { value: content.value, rtl: false },
                ease: "none",
                duration: 2.5,
                onUpdate: () => emit("textUpdate"),
            }
        );
    }
});
</script>

<template>
    <div class="perspective-near">
        <div
            :id="`message-container-${id}`"
            class="flex gap-2.5 origin-top w-full"
            :class="reverse ? 'flex-row-reverse' : ''"
        >
            <div
                class="relative overflow-hidden flex items-center justify-center mt-px bg-slate-300 rounded-full size-[35px] shrink-0"
            >
                <NuxtImg
                    v-if="reverse"
                    src="/img/heymlz/heymlz-full-body.jpg"
                    class="size-full object-cover absolute"
                    alt="profile"
                    loading="lazy"
                    fetch-priority="low"
                />
                <NuxtImg
                    v-else
                    :src="account?.profile_photo ?? ''"
                    class="size-full object-cover absolute"
                    loading="lazy"
                    fetch-priority="low"
                    alt="profile"
                />
            </div>
            <div
                class="rounded-150 px-4 py-3 whitespace-pre-wrap overflow-hidden"
                :class="reverse ? 'bg-slate-100 text-slate-600' : 'bg-black text-white'"
            >
                <div
                    v-if="!loadingContent"
                    :id="`chat-message-content-${id}`"
                    class="typo-p-sm font-normal whitespace-pre-wrap"
                    v-html="content"
                ></div>

                <Icon
                    v-else
                    name="ci:svg-spinners-3-dots-bounce"
                    size="20"
                />
            </div>
        </div>
    </div>
</template>
