<template>
  <component :is="rootComponent" v-bind="{ ...$props, ...$attrs }">
    <div class="bubble">
          {{ inOut }}
      <div class="original-message" v-if="inReplyToText">
        <div class="original-message-sender">{{ inReplyToSender }}</div>
        <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
      </div>

      <div class="message">
        <ThumbnailView class="clickable" v-on:itemclick="onDownload" :item="attachment" />
        <span class="edit-marker" v-if="event?.replacingEventId()">{{ $t("message.edited") }}</span>
      </div>
    </div>
  </component>
</template>

<script setup lang="ts">
import { computed, inject, ref, Ref } from "vue";
import MessageIncoming from "./MessageIncoming.vue";
import MessageOutgoing from "./MessageOutgoing.vue";
import ThumbnailView from "../../file_mode/ThumbnailView.vue";
import { useI18n } from "vue-i18n";
import { MessageProps, useMessage } from "./useMessage";
import { KeanuEvent } from "../../../models/eventAttachment";

const { t } = useI18n();
const $matrix: any = inject("globalMatrix");
const $$sanitize: any = inject("globalSanitize");

const inOut: Ref<"in" | "out"> = ref("in");

const emits = defineEmits<{ (event: "download", value: KeanuEvent | undefined): void }>();
const props = defineProps<MessageProps>();

const { event, isIncoming, attachment, inReplyToText, inReplyToSender, linkify } = useMessage(
  $matrix,
  t,
  props,
  undefined,
  undefined
);

const rootComponent = computed(() => {
  return isIncoming.value ? MessageIncoming : MessageOutgoing;
});

const onDownload = () => {
  emits("download", event.value);
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
</style>
