<template>
  <div class="statusEvent">
    <i18n-t keypath="message.room_upgraded" tag="span">
      <template v-slot:link>
        <a v-on:click="goToSuccessor" class="clickable" href="about:blank">{{ $t("message.room_upgraded_link") }}</a>
      </template>
    </i18n-t>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { MessageEmits, MessageProps } from "./useMessage";
import utils from "@/plugins/utils";

const $navigation: any = inject("globalNavigation");

const props = defineProps<MessageProps>();
const emits = defineEmits<MessageEmits>();

const goToSuccessor = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();

  const replacement_room = props.originalEvent.getContent().replacement_room;
  if (replacement_room) {
    $navigation.push(
      {
        name: "Chat",
        params: {
          roomId: utils.sanitizeRoomId(replacement_room),
        },
      },
      -1
    );
  }
};
</script>

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