<script setup>
import { computed } from 'vue';
import { useMessageContext } from '../provider.js';

import BaseBubble from 'next/message/bubbles/Base.vue';
import ImageChip from 'next/message/chips/Image.vue';
import VideoChip from 'next/message/chips/Video.vue';
import AudioChip from 'next/message/chips/Audio.vue';

import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
/**
 * @typedef {Object} Attachment
 * @property {number} id - Unique identifier for the attachment
 * @property {number} messageId - ID of the associated message
 * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
 * @property {number} accountId - ID of the associated account
 * @property {string|null} extension - File extension
 * @property {string} dataUrl - URL to access the full attachment data
 * @property {string} thumbUrl - URL to access the thumbnail version
 * @property {number} fileSize - Size of the file in bytes
 * @property {number|null} width - Width of the image if applicable
 * @property {number|null} height - Height of the image if applicable
 */
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
  attachments: {
    type: Array,
    default: () => [],
  },
});

const { variant } = useMessageContext();

const formattedContent = computed(() => {
  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
    return props.content;
  }

  return new MessageFormatter(props.content).formattedMessage;
});

const mediaAttachments = computed(() => {
  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
  const mediaTypes = props.attachments.filter(attachment =>
    allowedTypes.includes(attachment.fileType)
  );

  return mediaTypes.sort(
    (a, b) =>
      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
  );
});

const recordings = computed(() => {
  return props.attachments.filter(
    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
  );
});
</script>

<template>
  <BaseBubble class="p-3">
    <span v-html="formattedContent" />
    <div v-if="mediaAttachments.length" class="mt-[10px] flex gap-[10px]">
      <template v-for="attachment in mediaAttachments" :key="attachment.id">
        <ImageChip
          v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
          :attachment="attachment"
        />
        <VideoChip
          v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
          :attachment="attachment"
        />
      </template>
    </div>
    <div v-if="recordings.length" class="mt-[10px] flex gap-[10px]">
      <AudioChip
        v-for="attachment in recordings"
        :key="attachment.id"
        :attachment="attachment"
      />
    </div>
  </BaseBubble>
</template>

<style>
p:last-child {
  margin-bottom: 0;
}
</style>
