<template>
  <BottomSheet
    class="room-info-bottom-sheet"
    ref="sheet"
  >
    <div class="room-info-sheet" ref="roomInfoSheetContent">
      <div class="text-center current-room">
        <v-avatar class="room-avatar cursor-pointer" @click="showRoomAvatarPicker" v-if="isRoomAvatarLoaded">
          <v-img v-if="roomAvatar" :src="roomAvatar"/>
          <span v-else class="white--text headline">{{
            roomName.substring(0, 1).toUpperCase()
          }}</span>
           <input
            id="room-avatar-picker"
            ref="roomAvatar"
            type="file"
            name="roomAvatar"
            @change="handleRoomPickedAvatar($event)"
            accept="image/*"
            class="d-none"
          />
        </v-avatar>
        <v-progress-circular
          :rotate="360"
          v-else
          :width="3"
          :value="loadValue"
          color="primary"
        >
          {{ loadValue }}
        </v-progress-circular>
        <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
        <div class="h2">{{ roomName }}</div>
        <v-btn
          id="btn-room-details"
          height="20px"
          color="black"
          class="filled-button"
          @click.stop="showDetails"
          >{{$t('room_info_sheet.view_details')}}</v-btn
        >
      </div>
      <room-list :title="'Other rooms'" v-on:close="close" v-on:newroom="createRoom" :showCreate="true" />
    </div>
  </BottomSheet>
</template>

<script>
import util from "../plugins/utils";
import BottomSheet from "./BottomSheet";
import RoomList from "./RoomList.vue";
import roomInfoMixin from "./roomInfoMixin";

export default {
  name: "RoomInfoBottomSheet",
  mixins: [roomInfoMixin],
  data() {
    return {
      isRoomAvatarLoaded: true,
      loadValue: 0
    }
  },
  components: {
    BottomSheet,
    RoomList,
  },
  methods: {
    open() {
      this.$refs.sheet.open();
    },

    close() {
      this.$refs.sheet.close();
    },

    showDetails() {
      this.close();
      this.$navigation.push({ name: "RoomInfo" });
    },

    createRoom() {
      this.close();
      this.$navigation.push({ name: "CreateRoom" });
    },

    showRoomAvatarPicker() {
      this.$refs.roomAvatar.click();
    },

    setRoomAvatar(file) {
      const self = this;
      this.isRoomAvatarLoaded = false;
      return util.setRoomAvatar(
        this.$matrix.matrixClient,
        this.room.roomId,
        file,
        function (progress) {
          self.loadValue = Math.round(progress.loaded/progress.total * 100);
          if(progress.loaded === progress.total) {
            self.isRoomAvatarLoaded = true;
          }
        }
      );
    },
    /**
     * Handle room picked avatar
     */
    handleRoomPickedAvatar(event) {
      if (event.target.files && event.target.files[0]) {
        this.setRoomAvatar(event.target.files[0]);
      }
    },
  }
};
</script>

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