<template>
  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" 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>
</template>

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

export default {
  name: "RoomAvatarPicker",
  mixins: [roomInfoMixin],
  data() {
    return {
      isRoomAvatarLoaded: true,
      loadValue: 0
    };
  },
  methods: {
    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;
          }
        }
      )
    },
    handleRoomPickedAvatar(event) {
      if (event.target.files && event.target.files[0]) {
        this.setRoomAvatar(event.target.files[0]);
      }
    }
  }
};
</script>
