<template>
  <div
    :class="[
      fromMyself ? 'bg-secondary text-white' : 'bg-white',
      fromMyself ? 'message-box-self' : 'message-box-other',
    ]"
    class="py-3 px-4 max-w-chat-msg-text break-all message-box rounded-md"
  >
    <a
      v-if="isUrlMessage"
      :href="prependHttp(textMessage)"
      class="text-primary enable-touch"
      target="_blank"
      rel="noopener noreferrer"
    >
      {{ textMessage }}
    </a>
    <div v-else class="enable-touch">{{ textMessage }}</div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import isUrl from "@/utils/is-url";
import prependHttp from "prepend-http";

export default defineComponent({
  props: { fromMyself: Boolean, content: Object },

  setup(props) {
    const textMessage = computed(() => props.content?.content);
    const isUrlMessage = computed(() => isUrl(textMessage.value));

    return { isUrlMessage, prependHttp, textMessage };
  },
});
</script>

<style scoped>
.message-box {
  position: relative;
}
.message-box-self::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0px;
  transform: translate(100%, 15px);
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #3e4faf;
}
.message-box-other::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  transform: translate(-100%, 15px);
  border-top: 6px solid transparent;
  border-right: 6px solid white;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}
</style>
