<template>
    <div
        class="max-w-full p-3 overflow-hidden rounded-lg"
        :class="containerClasses"
    >
        <div
            class="flex flex-col gap-1.5"
            :class="!isSender ? 'items-start' : 'items-end'"
        >
            <div
                class="flex items-center justify-start gap-1.5"
                :class="!isSender ? 'flex-row' : 'flex-row-reverse'"
            >
                <span
                    class="flex items-center justify-center overflow-hidden bg-blue-300 rounded-full w-7 h-7"
                >
                    <img
                        class="object-cover object-center w-full h-full"
                        :src="profile.profile_photo_url"
                        :alt="profile.name"
                    />
                </span>
                <div
                    class="flex items-center justify-start gap-1.5 flex-1"
                    :class="!isSender ? 'flex-row' : 'flex-row-reverse'"
                >
                    <span
                        class="flex-1 text-xs font-medium text-gray-300 line-clamp-1"
                    >
                        {{ profile.name }}
                    </span>
                    <span
                        class="text-xs font-medium text-gray-200 line-clamp-1"
                    >
                        {{ moment(message.created_at).fromNow() }}
                    </span>
                </div>
            </div>
            <div
                v-if="message.message"
                class="relative max-w-full px-4 py-2 text-xs text-gray-300 bg-blue-200 rounded-lg"
            >
                <span class="break-words whitespace-pre-line">
                    {{ message.message }}
                </span>
            </div>
            <div
                v-if="message.attachment"
                class="relative max-w-full px-4 py-2 text-xs text-gray-300 bg-blue-200 rounded-lg"
            >
                <img
                    v-if="isImage"
                    :src="message.attachment"
                    alt="Attachment"
                    class="object-cover max-h-64"
                />
                <a
                    v-else
                    :href="message.attachment"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="break-words whitespace-pre-line line-clamp-1 overflow-ellipsis"
                >
                    <span
                        class="flex items-center justify-start gap-2"
                        v-if="!attachmentIsZoomLink"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-paperclip"
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path
                                d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"
                            />
                        </svg>
                        Sent an attachment!
                    </span>
                    <span class="flex items-center justify-start gap-2" v-else>
                        <svg
                            class="w-6 h-6"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 50.667 50.667"
                        >
                            <path
                                d="M25.333 50.667c13.992 0 25.334-11.343 25.334-25.334S39.325 0 25.333 0 0 11.342 0 25.333s11.342 25.334 25.333 25.334z"
                                fill="#2196f3"
                            />
                            <path
                                clip-rule="evenodd"
                                d="M14.866 32.574h16.755V20.288c0-1.851-1.5-3.351-3.351-3.351H11.515v12.286c0 1.851 1.5 3.351 3.351 3.351zm18.988-4.467l6.702 4.467V16.937l-6.701 4.468z"
                                fill="#fff"
                                fill-rule="evenodd"
                            />
                        </svg>
                        Sent a Zoom link, click to join!
                    </span>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        message: {
            type: Object,
            required: true,
        },
        sender: {
            type: Object,
            required: true,
        },
        user: {
            type: Object,
            required: true,
        },
    },
    computed: {
        isSender() {
            return this.message.sender_uid == this.$page.props.current_user.id;
        },
        containerClasses() {
            return {
                "col-start-1 sm:col-start-4 col-end-13": this.isSender,
                "col-start-1 sm:col-end-9 col-end-13": !this.isSender,
            };
        },
        profile() {
            if (this.isSender) {
                return this.user;
            }
            return this.sender;
        },
        attachmentIsZoomLink() {
            return this.message.attachment.includes("zoom.us");
        },
    },
    methods: {
        async CheckIsImage() {
            return await this.isImageUrl(this.message.attachment);
        },
    },
    mounted() {
        if (this.message.attachment) {
            this.CheckIsImage().then((res) => {
                this.isImage = res;
            });
        }
    },
    data() {
        return {
            isImage: true,
        };
    },
};
</script>
