<template>
  <v-list dense class="room-list">
    <div v-if="showInvites" class="h4">{{invitesTitle}}</div>
    <v-list-item-group v-if="showInvites" v-model="currentRoomId" color="primary">
      <v-slide-y-transition group>
      <v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in $matrix.invites" :key="room.roomId" :value="room.roomId">
        <v-list-item-avatar size="40" color="#e0e0e0">
          <v-img :src="room.avatar" />
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title>{{ room.name || room.summary.info.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
        </v-list-item-content>
        <v-list-item-action>
          <v-btn @click.stop="acceptInvitation(room)" icon><v-icon>check_circle</v-icon></v-btn>
          <v-btn @click.stop="rejectInvitation(room)" icon><v-icon>cancel</v-icon></v-btn>
        </v-list-item-action>
      </v-list-item>
      </v-slide-y-transition>
    </v-list-item-group>
    <div class="h4">{{title}}</div>
    <v-list-item-group v-model="currentRoomId" color="primary">
      <v-list-item v-for="room in $matrix.joinedRooms" :key="room.roomId" :value="room.roomId">
        <v-list-item-avatar size="40" color="#e0e0e0">
          <v-img :src="room.avatar" />
        </v-list-item-avatar>
        <div class="room-list-notification-count">{{ notificationCount(room) }}</div>
        <v-list-item-content>
          <v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</template>

<script>
import util from "../plugins/utils";
import Vue from 'vue';

export default {
  name: "RoomList",

  props: {
    title: {
      type: String,
      default: "Rooms"
    },
    invitesTitle: {
      type: String,
      default: "Invites"
    },
    showInvites: {
      type: Boolean,
      default: false
    }
  },

  data: () => ({
    currentRoomId: null,
    /** A list of rooms currently processing some operation, like "join" or "reject" */
    roomsProcessing: {},
  }),

  methods: {
    notificationCount(room) {
      return room.getUnreadNotificationCount('total') || 0;
    },

    acceptInvitation(room) {
      Vue.set(this.roomsProcessing, room.roomId, true);
      this.$matrix.matrixClient.joinRoom(room.roomId)
        .then((ignoredRoom) => {
          this.$nextTick(() => {
            this.$navigation.push(
              {
                name: "Chat",
                params: { roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId) },
              },
              -1
            );
          });
        })
        .catch((err) => {
          console.error("Failed to accept invite: ", err);
        })
        .finally(() => {
          Vue.delete(this.roomsProcessing, room.roomId);
        });
    },

    rejectInvitation(room) {
      Vue.set(this.roomsProcessing, room.roomId, true);
      this.$matrix.leaveRoom(room.roomId)
        .catch((err) => {
          console.error("Failed to reject invite: ", err);
        })
        .finally(() => {
          Vue.delete(this.roomsProcessing, room.roomId);
        });
    },
  },

  watch: {
    currentRoomId() {
      this.$emit("close");
      this.$navigation.push({name: 'Chat', params: { roomId: util.sanitizeRoomId(this.currentRoomId) }}, -1);
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

<style lang="scss" scoped>
/** Align action buttons side to side */
.v-list-item__action--stack {
  flex-direction: row !important;
}
</style>