<script>
import ActionCable from 'actioncable'

export default {
  name: 'action-cable-vue',
  props: {
    channel: String,
    room: String
  },
  data () {
    return {
      consumer: null,
      subscription: null
    }
  },
  methods: {
    subscribe () {
      if (this.subscription) this.unsubscribe() // If this funciton is executed we need to unsuscribe when exists a subscription

      this.consumer = ActionCable.createConsumer(`ws://${window.location.host}/cable`) // This point to the Rails path

      if (this.channel && this.room) { // Verify if data is setted
        this.subscription = this.consumer.subscriptions.create({ channel: this.channel, room: this.room }, {
          received: (e) => this.$emit('received', e),
          initialized: () => this.$emit('initialized'),
          connected: () => this.$emit('connected'),
          disconnected: () => this.$emit('disconnected'),
          rejected: () => this.$emit('rejected')
        })
      }
    },
    unsubscribe () {
      this.consumer.subscriptions.remove(this.subscription)
    }
  },
  mounted () {
    this.subscribe()
  },
  watch: {
    room () {
      this.subscribe()
    }
  }
}
</script>
