<template>
  <div class="enrol-footer-wrapper">
    <div class="enrol-header-inner">
      <div class="enrol-footer-menu">
        <b-navbar toggleable="md">
          <b-navbar-nav class="mr-auto">
            <!-- left alligned menu items -->
            <b-nav-item
              v-for="(route, index) in bottomMenuList"
              :href="route.path"
              target="_blank"
              :key="`right-${index}`"
            >
              {{ route.name }}
            </b-nav-item>
          </b-navbar-nav>
        </b-navbar>
      </div>
      <div class="enrol-copyright">
        {{ $t('Enrolment.BottomMenu.Copyright') }}
      </div>
    </div>
  </div>
</template>
<script>
import { mapMasterDataId } from '@/app/_global/mixins'
import { mapActions, mapGetters } from 'vuex'

const MenuHeader = {
  name: 'enrolment-footer',
  data() {
    return {}
  },
  props: {
    displayOnly: { type: Boolean, default: false },
  },
  watch: {
    getAppLocationCountry() {
      this.loadDocuments()
    },
  },
  async mounted() {
    await this.loadDocuments()
  },
  methods: {
    ...mapActions(['loadEformActLink']),
    async loadDocuments() {
      if (!this.displayOnly && this.privacyId && this.membersRNRId) {
        await this.resolveMasters.then(() => {
          this.loadEformActLink([this.privacyId, this.membersRNRId])
        })
      }
    },
  },
  computed: {
    ...mapGetters(['getEformLinkDataByKeyId', 'getAppLocationCountry']),
    ...mapMasterDataId({
      SMART_LIBRARY_EFORM_FILE_TYPE: {
        privacyId: 'PRIVACY',
        membersRNRId: 'MEMBERSRNR',
      },
    }),
    bottomMenuList() {
      return [
        {
          name: this.$t('Eshop.BottomMenu.Privacy'),
          path: this.getEformLinkDataByKeyId(this.privacyId).link,
        },
        {
          name: this.$t('Eshop.BottomMenu.MembersRnR'),
          path: this.getEformLinkDataByKeyId(this.membersRNRId).link,
        },
      ]
    },
  },
}

export default MenuHeader
</script>
