<template>
  <div class="statusEvent">
    {{ upgrading ? $t("room.upgrading") : $t("room.needs_upgrade") }}
    <v-btn :loading="upgrading" v-on:click="upgradeRoom">{{ $t("menu.upgrade") }}</v-btn>
  </div>
</template>

<script setup lang="ts">
import { inject, Ref, ref } from 'vue';


type RoomUpgradePromptProps = {
  version: string;
  urgent: boolean;
  roomId: string;
};

const props = defineProps<RoomUpgradePromptProps>();
const $matrix: any = inject('globalMatrix');

const upgrading: Ref<boolean> = ref(false);

const upgradeRoom = () => {
  upgrading.value = true;
  $matrix.matrixClient.upgradeRoom(props.roomId, props.version).then((r: {replacement_room: string}) => {
    upgrading.value = false;
  })
};

if (props.urgent) {
  upgradeRoom();
}

</script>

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