<template>
  <div class="thinglink-block">
    <div class="thinglink-block__wrapper">
      <iframe
        :src="src"
        class="thinglink-block__iframe"
        frameborder="0"
        width="800px"
        height="600px"
        type="text/html"
        webkitallowfullscreen
        mozallowfullscreen
        scrolling="no"
        allowscriptaccess="always"
        allowfullscreen="true"
        allownetworking="all"/>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['value'],

    computed: {
      src() {
        return `https://www.thinglink.com/card/${this.value.id}`;
      }
    },

    methods: {
      openFullscreen() {
        this.$store.dispatch('showFullscreenInfographic', {
          id: this.value.id,
          type: 'thinglink-block'
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  // Styling and structure taken from original iframe
  .thinglink-block {
    width: 100%;
    margin-bottom: $large-spacing;

    &__wrapper {
      position: relative;
      padding-bottom: 75%;
      padding-top: 0;
      height: 0;
    }

    &__iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &__link {
      cursor: pointer;
    }
  }
</style>
