<template>
  <div class="smartform-vue">
    <form :id="formId" style="display: none;">
      <input type="hidden" name="smartformRequest">
    </form>
    <iframe :name="initiator" :id="initiator" :key="initiator" frameborder="0" height="400px"
      style="border: none; overflow-x: hidden; width: 100%; opacity: 0; max-height: 400px; transition: max-height 0.5s, opacity 0.5s;"></iframe>
  </div>
</template>

<script>
import smartformsInit from '../browser'
import { realmToURL } from '../utils.js'

export default {
  props: {
    initiator: String,      /* The initiator ID */ 
    realm: String,          /* The realm, in form 'au', or 'au.smartfor.ms' or 'https://au.smartfor.ms' */
    request: String         /* The signed request */
  },
  methods: {
    reload: function () {
      this.$nextTick(() => {
        smartformsInit({
          formID: this.formId,
          initiator: this.initiator,
          realm: this.fullRealm,
          request: this.request
        })
      })
    }
  },
  mounted: function () {
    this.reload()
  },
  computed: {
    formId: function () {
      return this.initiator + '-form'
    },
    fullRealm: function () {
      return realmToURL(this.realm)
    }
  },
  watch: {
    request: function (v) {
      if (v) {
        this.reload()
      }
    }
  }
}
</script>