<template>
  <div id="snt-app">
    <v-style>
      {{ stylesheet }}
    </v-style>
    <div id="header">
      <v-runtime-template
        type="header"
        :template="headerTemplate"
        :settings="[]"
        :data="{ theme }" />
    </div>
    <router-view />
    <div id="footer">
      <v-runtime-template
        type="footer"
        :template="footerTemplate"
        :settings="[]"
        :data="{ theme }" />
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import {
  GET_PRODUCT_CATEGORIES,
  GET_PRODUCT_BRANDS
} from '@/resources/graphql'
import VRuntimeTemplate from '@/components/sale-page/VRuntimeTemplate.vue'

export default {
  name: 'SalePage',
  components: {
    VRuntimeTemplate
  },
  apollo: {
    productCategories: () => ({
      query: GET_PRODUCT_CATEGORIES,
      result ({ data: { productCategories } }) {
        this.setProductCategories(productCategories)
      }
    }),
    productBrands: () => ({
      query: GET_PRODUCT_BRANDS,
      result ({ data: { productBrands } }) {
        this.setProductBrands(productBrands)
      }
    })
  },
  data () {
    return {
      stylesheet: '',
      headerTemplate: '',
      footerTemplate: ''
    }
  },
  computed: {
    ...mapGetters({
      subdomain: 'salePage/subdomain',
      theme: 'salePage/theme'
    })
  },
  // watch: {
  //   theme: {
  //     immediate: true,
  //     handler ({ color }) {
  //       this.$vuetify.theme.themes.light = this.$_.defaults(color, this.$vuetify.theme.themes.light)
  //     }
  //   }
  // },
  async created () {
    this.stylesheet = await fetch(`/html/${this.$route.params.slug}/stylesheet.css`).then((r) => r.text())
    this.headerTemplate = await fetch(`/html/${this.$route.params.slug}/header.html`).then((r) => r.text())
    this.footerTemplate = await fetch(`/html/${this.$route.params.slug}/footer.html`).then((r) => r.text())
  },
  methods: {
    ...mapActions({
      setProductCategories: 'salePage/setProductCategories',
      setProductBrands: 'salePage/setProductBrands'
    })
  }
}
</script>

<style scoped>

</style>
