<template>
  <div>
    <snt-stylesheet>
      {{ stylesheet }}
    </snt-stylesheet>
    <v-runtime-template
      :template="headerTemplate"
      :data="{ theme }" />
    <v-runtime-template
      :template="contentTemplate"
      :data="{ theme }" />
    <v-runtime-template
      :template="footerTemplate"
      :data="{ theme }" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VRuntimeTemplate from './components/VRuntimeTemplate.vue'

export default {
  name: 'HtmlLoader',
  components: {
    VRuntimeTemplate
  },
  props: {
    fileName: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      stylesheet: '',
      headerTemplate: '',
      contentTemplate: '',
      footerTemplate: ''
    }
  },
  computed: {
    ...mapGetters({
      theme: 'local/theme'
    })
  },
  watch: {
    theme: {
      immediate: true,
      handler ({ color }) {
        this.$shipnity.theme.setTheme('light', color)
      }
    }
  },
  async created () {
    const params = this.$route.params
    this.stylesheet = await fetch(`/html/${params.slug}/stylesheet.css`).then((r) => r.text())
    this.headerTemplate = await fetch(`/html/${params.slug}/header.html`).then((r) => r.text())
    this.contentTemplate = await fetch(`/html/${params.slug}/${this.fileName}`).then((r) => r.text())
    this.footerTemplate = await fetch(`/html/${params.slug}/footer.html`).then((r) => r.text())
  }
}
</script>
