<template>
  <tabs-template>
    <b-container fluid class="px-4">
      <b-row class="align-items-center border-bottom pb-3">
        <b-col cols="12" md="2" xl="1" class="mb-2 mb-md-0 pl-1 text-center">
          <icon name="circle-notch" spin v-if="loadingExpiryDate" class="icon-size-4 text-primary" />
          <icon v-else :class="{ [statusInfo.variant]: true, 'icon-size-5': true }" :name="statusInfo.icon" />
        </b-col>
        <b-col class="pl-2 py-2 text-center text-md-left">
          <h6 class="m-0">
            <span v-if="loadingExpiryDate">-</span>
            <template v-else>
              {{ statusInfo.title }}
            </template>
          </h6>
          <span>
            {{ $t('MyAccount.Subscription.ExpirationDate') }}
          </span>
          <h4 class="m-0">
            <icon name="spinner" pulse v-if="loadingExpiryDate" />
            <template v-else>
              {{ subscriptionDate }}
            </template>
          </h4>
        </b-col>
      </b-row>
      <b-row class="py-2">
        <span>
          {{ $t('MyAccount.Subscription.Message') }}
          <a target="_blank" :href="subscription.learnMoreLinks[0].link">{{ $t('Common.LearnMore') }}</a>
        </span>
      </b-row>
      <b-row class="py-2 pt-4 text-center text-md-left">
        <b-btn variant="primary" :to="SubscriptionLink" class="m-auto m-md-0">
          {{ $t('MyAccount.Subscription.Subscribe') }}
        </b-btn>
      </b-row>
    </b-container>
  </tabs-template>
</template>
<script>
import MyAccountTabsTemplate from './templates/MyAccountTabsTemplate'
import { mapGetters, mapState } from 'vuex'
import { SUBSCRIPTION } from '@/config/url-prefix'
import moment from 'moment'

export default {
  name: 'Subscription',
  components: {
    TabsTemplate: MyAccountTabsTemplate,
  },
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      SubscriptionLink: SUBSCRIPTION,
    }
  },
  watch: {},
  computed: {
    ...mapState({
      subscription: state => state.memberModule.subscription,
    }),
    ...mapGetters(['getAppLocationCountry', 'getSubscriptionLinkByCountry', 'isLoading']),
    statusInfo() {
      return this.subscription.status
        ? {
            title: this.$t('MyAccount.Subscription.Subscribed'),
            variant: 'text-info-green',
            icon: 'tick-icon',
          }
        : {
            title: this.subscription.hasSubscripbedBefore
              ? this.$t('MyAccount.Subscription.Expired')
              : this.$t('MyAccount.Subscription.NoSubscription'),
            variant: 'text-danger',
            icon: 'warning',
          }
    },
    learnMore() {
      return this.getSubscriptionLinkByCountry(this.getAppLocationCountry.countryId)
    },
    loadingExpiryDate() {
      return this.isLoading(['myAccountInfo', 'loadMemberDetails'])
    },
    subscriptionDate() {
      return this.subscription.hasSubscripbedBefore ? moment(this.subscription.expiryDate).format('D-MMM-YYYY') : '-'
    },
  },
}
</script>
