<template>
  <button
    ref="btn"
    class="modal-btn"
    @click="toggleActive()"
  >
    <slot />
  </button>
</template>

<script>
export default {
  data() {
    return {
      active: false,
    }
  },
  methods: {
    toggleActive() {
      const modal = this.$refs.btn.nextSibling;
      const video = modal.querySelector('.video');
      this.active = !this.active;

      this.active ? 
        modal.classList.add('modal--active') :
        modal.classList.remove('modal--active');

      // If theres a Video in the slot of
      // this components sibling IE the modal itself
      // click it. That will toggle the pause and play.
      if (video) {
        video.click();
      }
    }
  }
}
</script>