<template>
  <div class="chat--messages-pane"
    :key="chatID"
    ref="message_pane"
    v-chat-scroll="{
      always: true, 
      smooth: true, 
      notSmoothOnInit: true,
      scrollonremoved:true, 
      smoothonremoved: false
      }"
  >
    <be-spinner v-if="loading"/>
    <template
      v-if="!loading">
      <div 
      class="chat--messages-pane-inner"
      >
        <MessageBase class="message"
          :chatEngine=chatEngine
          :bus=bus
          v-for="message of messages"
          :key="message.id"
          :message="message"
          :mine="message.from === userId"
        />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message, MessageList, Person } from './type';
import MessageBase from './MessageBase.vue';
import Chat from './Chat.vue';
import ChatEngine from './ChatEngine';

@Component({
  components: {
    MessageBase,
  },
})
export default class MessagesPane extends Vue {
  @Prop() private chatEngine!: ChatEngine;
  @Prop() private bus!: Chat;
  @Prop() private messages!: MessageList;
  @Prop() private userId!: string;
  @Prop() private loading!: Boolean;

  get chatID() {
    try {
      return this.$root.$route.params.id;
    }
    catch(error) {
      return '';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

// .chat--messages-pane {
//   padding: 16px 15px 16px 20px !important;
// }

</style>
