<template>
  <div>
    <b-button @click="broadcastStatus" icon-left="sync">Force status update</b-button>
    <hr>
    <b-table :data="usersList" striped hoverable>
      <template slot-scope="props">
        <b-table-column field="name" label="Name">
          {{props.row.name}}
        </b-table-column>

        <b-table-column field="connection" label="Connection">
          {{props.row.connection.signalingState}}
        </b-table-column>

        <b-table-column field="data" label="DataChannel">
          {{props.row.dataChannel.readyState}}
        </b-table-column>

        <b-table-column>
          <b-button @click="kickUser(props.row.name)" icon-left="karate" type="is-dark"/>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'Admin',
  computed: {
    usersList () {
      return this.$store.state.rtc.peers
    }
  },
  methods: {
    broadcastStatus () {
      this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
    },
    kickUser (target) {
      this.$store.dispatch('rtc/kick', target)
    }
  }
}
</script>
