<template>
  <tabs-template :links="getTabsLink" class="my-account" :menu-title="$t(tabTitle)">
    <b-overlay :show="isBusy" variant="white" :class="[{ 'vh-25': isBusy }, 'p-3']" opacity="0.96" no-center>
      <template v-slot:overlay>
        <b-row class="justify-content-center my-5 py-5">
          <b-col cols="auto">
            <b-spinner class="mx-2 text-primary" />
            <strong class="h4">{{ $t('Common.Loading') }}</strong>
          </b-col>
        </b-row>
      </template>
      <slot />
    </b-overlay>
  </tabs-template>
</template>
<script>
import TabsTemplate from '@/app/_global/components/templates/TabsTemplate'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'MyAccountTabsTemplate',
  components: {
    TabsTemplate,
  },
  data() {
    return {
      currentTitle: null,
      links: [
        { url: { name: 'MyAccountBusinessInfo' }, title: this.$t('MyAccount.BusinessInfo.Title') },
        { url: { name: 'MyAccountPersonalInfo' }, title: this.$t('MyAccount.PersonalInfo.Title') },
        { url: { name: 'Subscription' }, title: this.$t('MyAccount.Subscription.Title') },
        { url: { name: 'MyAccountAddressInfo' }, title: this.$t('MyAccount.Address.Title') },
        { url: { name: 'MyAccountBonusInfo' }, title: this.$t('MyAccount.BonusInfo.Title') },
        { url: { name: 'MyAccountPlacementPreference' }, title: this.$t('MyAccount.PlacementPreference.Title') },
        { url: { name: 'MyAccountChangePassword' }, title: this.$t('MyAccount.ChangePassword.Title') },
        { url: { name: 'MyAccountAmpPreferencesSettings' }, title: this.$t('MyAccount.AmpPreference.Title') },
      ],
    }
  },
  async mounted() {
    await this.loadMyAccountInfo()
    await this.loadCountryDynamicContent()
  },
  computed: {
    ...mapGetters(['isLoading', 'getMyAccountMemberDetails', 'getMemberCountryName', 'getRules']),
    title() {
      let title = this.$store.state.route.meta.title
      if (typeof title !== 'undefined') {
        return title
      } else {
        let dashboardMenu = this.$store.state.route.meta.dashboardMenu
        return dashboardMenu.displayName
      }
    },
    tabTitle() {
      let { tabDisplayName, dashboardMenu } = { ...this.$store.state.route.meta }
      return tabDisplayName || dashboardMenu.tabDisplayName || ''
    },
    getTabsLink() {
      return this.filterLinks(this.links)
    },
    isBusy() {
      return this.isLoading([
        'myAccountInfo',
        'locationStateLoading',
        'getDynamicContent',
        'CountryRelationStateLoading',
        'loadingCountryDynamicContent',
      ])
    },
  },
  methods: {
    ...mapActions(['loadMyAccountInfo', 'loadCountryDynamicContent']),
    filterLinks(links) {
      let rules = {
        Subscription: this.$helpers.getValue(this.getRules, 'tabs.my_account_subscription_tab', false) === true,
        MyAccountAmpPreferencesSettings: this.$appSettings.myAccount.ampPreference,
        MyAccountPlacementPreference: this.$appSettings.placementPreference.enable,
      }

      return links.filter(link => {
        let currentLink = link.url || { name: '' }
        return rules[currentLink.name] === undefined || rules[currentLink.name]
      })
    },
  },
}
</script>
