<template>
  <div class="landing enrol-container" :class="currentContainerClass">
    <div id="enrol-header" class="enrol-header" v-if="initialized">
      <slot name="header">
        <component :is="currentHeader" />
      </slot>
    </div>
    <div class="enrol-content">
      <slot>
        <router-view @initialized="initializeEnrolment" class="route-view" />
      </slot>
    </div>
    <div id="enrol-footer" class="enrol-footer" v-if="initialized">
      <slot name="footer">
        <component :is="currentFooter" :key="$helpers.getValue(getEnrolmentLanguage, 'key', '')" />
      </slot>
    </div>
  </div>
</template>
<script>
import SlotPropsSetter from '@/elements/common/mixins/slot-props-setter'
import { mapGetters } from 'vuex'

export default {
  name: 'EnrolmentHybridLayout',
  props: ['header', 'footer', 'containerClass'],
  mixins: [SlotPropsSetter],
  data() {
    return {
      currentHeader: null,
      currentFooter: null,
      currentContainerClass: null,
      initialized: false,
    }
  },
  mounted() {
    this.setSlotProp('containerClass', 'currentContainerClass')
    this.setSlotProp('header', 'currentHeader')
    this.setSlotProp('footer', 'currentFooter')
  },
  methods: {
    initializeEnrolment() {
      this.initialized = true
    },
  },
  computed: {
    ...mapGetters('enrolment', ['getEnrolmentLanguage']),
  },
}
</script>
