Vue.component('rnav', {
  template: `
  <span class="rnav" v-on:click="toggle">{{ tag.name }}</span>
  `,
  props : ['tag'],
  methods: {
    toggle() {
      vm.$data.isFresh = false
      this.tag.isTrue = !this.tag.isTrue
    }
  }
})

Vue.component('ritem', {
  template: `
  <section class="ritem" v-show="tags.some(o => o.isTrue === true) || fresh">
    <slot></slot>
  </section>
  `,
  props : {
    tags: Array,
    fresh: Boolean
  }
})

Vue.component('rssdate', {
  template: `
  <section class="rss-date">
    <p>When you loaded that page, the correct pubDate string was:</p>
    <h4>
      <copyme>{{ pubDate }}</copyme>
    </h4>
  </section>
  `,
  computed : {
    pubDate () {
      const date = new Date()
      return date.toUTCString()
    }
  }
})

Vue.component('copyme', {
  template: `
    <section class="copyme-containter" v-on:click="copyToClipboard">
      <span class="copypopup" v-bind:class="{ 'success': isCopied}" ref="element">Copied!</span>
      <section class="copyme" ref="copyThis">
        <slot></slot>
      </section>
    </section>
  `,
  data() {
    return {
      isCopied: false
    }
  },
  methods : {
    copyToClipboard() {
      const textToCopy = this.$refs.copyThis;
      const range = document.createRange();
      range.selectNode(textToCopy);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
      this.copyDone();     
    },
    copyDone(){
      this.isCopied = true;
      this.$refs.element.addEventListener('animationend', () => {
        this.isCopied = false;
      });
    }
  }
})

Vue.component('ppbut' ,{
  template : `
    <div>
    <button
      class="ppbut"
      v-bind:class="{ playing: isPlaying }"
      v-on:click="pp">
    </button>
    <audio ref="audioElm" preload="none">
      <source v-bind:src="audiourl">
    </audio>
    </div>
  `,
  data () {
    return {
      isPlaying : false
    }
  },
  props: ['audiourl'],
  methods: {
    pp (e) {
      if (!this.isPlaying) {
        this.mutePage();
        this.isPlaying = !this.isPlaying;
        this.$refs.audioElm.load();
        this.$refs.audioElm.play();
        this.$refs.audioElm.addEventListener("ended",
          function() {
            this.isPlaying = false;
            console.log(this.isPlaying);
            alert("The audio has ended");
        });

      } else {
        this.isPlaying = !this.isPlaying;
        this.$refs.audioElm.pause();
      }
    },
    mutePage () {
      var x = document.getElementsByTagName("audio");
      var i;
      for (i = 0; i < x.length; i++) {
          x[i].pause();
      }
      var y = document.getElementsByClassName("ppbut");
      for (i = 0; i < y.length; i++) {
        y[i].classList.remove("playing");
      }
    }
  }
})

let vm = new Vue({
  data () {
    return {
      name: 'test',
      check: 'check2',
      isFresh: true,
      tags: {
        css: { 
          name: "CSS",
          isTrue: false
        },
        code: {
          name: "Code",
          isTrue: false
        },
        selfhost: {
          name: "Self-hosting",
          isTrue: false
        },
        design: {
          name: "Design",
          isTrue: false
        }
      } 
    }
  }
}).$mount('#root')