<template>
  <v-dialog v-model="showDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
    scroll-strategy="none">
    <div class="dialog-content text-center">
      <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>
      <div class="dialog-text">{{ (eventId == null) ? $t("room_info.report_info") : $t("room_info.report_event_info") }}
      </div>
      <v-text-field v-model="reason" :label="$t('room_info.report_reason')"></v-text-field>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn id="btn-back" variant="flat" block class="text-button" @click="showDialog = false">{{
              $t("menu.cancel") }}</v-btn>
          </v-col>
          <v-col cols="6" align="center">
            <v-btn id="btn-report" color="red" variant="flat" block class="filled-button" @click.stop="onReport()">{{
              $t("room_info.report") }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script>
import RoomDialogBase from "./RoomDialogBase.vue";

export default {
  name: "ReportRoomOrEventDialog",
  extends: RoomDialogBase,
  props: {
    // If eventId == null then report Room, otherwise report this event
    eventId: {
      type: String,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      reason: ""
    };
  },

  methods: {
    onReport() {
      let promise = undefined;
      if (this.eventId) {
        promise = this.$matrix.matrixClient.reportEvent(this.room.roomId, this.eventId, -100, this.reason)
      }
      else {
        promise = this.$matrix.matrixClient.reportRoom(this.room.roomId, this.reason);
      }
      promise.then(() => {
        this.showDialog = false;
      })
        .catch((err) => {
          console.log("Error reporting", err);
        });
    },
  },
};
</script>

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