<template>
  <div>
    <b-field label="Player">
      <b-switch size="is-medium" v-model="localSettings.playLink" @input="setLocalSettings">Play link</b-switch>
    </b-field>
    <b-field>
      <b-switch size="is-medium" v-model="localSettings.externalSearch" @input="setLocalSettings">Enable Youtube search</b-switch>
    </b-field>
    <div v-if="isAdmin">
      <hr>
      <b-field label="Admin">
        <b-switch size="is-medium" v-model="roomSettings.userControl" @input="setRoomSettings">Users can control video</b-switch>
      </b-field>
      <b-field>
        <b-switch size="is-medium" v-model="roomSettings.userLink" @input="setRoomSettings">Users can add link</b-switch>
      </b-field>
    </div>
    <hr>
    <b-field label="User">
      <b-button type="is-danger" icon-right="exit-to-app" @click="leave">Leave</b-button>
    </b-field>
  </div>
</template>

<script>
export default {
  name: 'Settings',
  data () {
    return {
      localSettings: this.$store.state.room.localSettings,
      roomSettings: this.$store.state.room.roomSettings
    }
  },
  computed: {
    isAdmin () {
      return this.$store.state.room.admin
    }
  },
  mounted () {
    if (this.isAdmin) {
      this.localSettings.playLink = true
      this.setLocalSettings()
    }
  },
  methods: {
    leave () {
      this.$store.dispatch('room/leave')
      this.$router.push({ name: 'Home' })
    },
    setLocalSettings () {
      this.$store.dispatch('room/setLocalSettings', this.localSettings)
    },
    setRoomSettings () {
      this.$store.dispatch('room/setRoomSettings', this.roomSettings)
    }
  }
}
</script>
