<script>

import { mapActions, mapState } from 'pinia'
import { StaticsStore } from '@/stores/statics'

export default {
  props: ['id'],
  // data(){
  //   return {
  //     block: null
  //   }
  // },
  computed: {
    ...mapState(StaticsStore,['loaded', 'statics_byid'])
  },
  created () {
    console.log("static created, id", this.id);
    // this.loadStatics()
  },
  methods: {
    ...mapActions(StaticsStore,['loadStatics']),
    getParsedText(){
      let text = this.statics_byid[this.id].texte;
      console.log('text', text);
      let reg = /https:\/\/(vimeo\.com|www\.youtube\.com)\/(watch\?v=)?(\w+)/g;
      let videolinks = [...text.matchAll(reg)];
      // console.log('videolinks', videolinks);
      for (let link of videolinks){
        console.log('videolink', link);
        let url, iframe;
        switch (link[1]) {
          case 'vimeo.com':
            url = `https://player.vimeo.com/video/${link[3]}`;
            iframe = `<iframe src="${url}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`
            break;
          case 'www.youtube.com':
            url = `https://www.youtube.com/embed/${link[3]}`;
            iframe = `<iframe src="${url}" frameborder="0" allowfullscreen></iframe>`
            break;
        }
        console.log('iframe', iframe);
        text = text.replace(link[0], iframe);
      };
      return text;
    }
  },
  components: {
    // MapConcernements
  }
}

</script>

<template>
  <section class="static">
    <span v-if="!loaded">loading ...</span>
    <!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
    <h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
    <div v-if="loaded" v-html="getParsedText()"/>

  </section>
</template>

<style lang="scss" scoped>

</style>
