<template>
  <b-card no-body class="dashboard-panel-element rounded-0 pt-0 pb-3" v-can:view="'auto-ship'">
    <b-row class="py-2 mx-0">
      <b-col cols="6" md="8" class="pl-0">
        <b-button variant="link" @click="backToDetails">
          <icon name="back-arrow" class="mr-2" style="margin-top:-4px" />
          <span
            class="font-size-5 text-decoration-none d-none d-md-inline-block"
            data-qa="autoship-autoship-edit-back-btn"
            >{{ $t('Autoship.BackToDetails.Label') }}</span
          >
          <span class="d-inline-block font-size-5 text-decoration-none d-md-none">{{ $t('Common.Back') }}</span>
        </b-button>
      </b-col>
    </b-row>
    <div v-if="isLoading('loadingSubscriptionDetail')">
      <div class="text-center text-primary my-5 mt-3">
        <b-spinner class="mx-2" />
        <strong class="h4">{{ $t('Common.Loading') }}</strong>
      </div>
    </div>
    <div v-else class="mt-2">
      <b-tabs content-class="mt-3" v-model="tabIndex">
        <b-tab lazy :title="$t('Autoship.Edit.PaymentTab')" :title-link-class="linkClass(0)">
          <b-col>
            <payment-edit :is-update="true" :current-subscription="getAutoshipSubscriptionDetail" />
          </b-col>
        </b-tab>
        <b-tab lazy :title="$t('Autoship.Edit.AddressesTab')" :title-link-class="linkClass(1)">
          <b-col>
            <addresses-edit :is-update="true" :current-subscription="getAutoshipSubscriptionDetail" />
          </b-col>
        </b-tab>
      </b-tabs>
    </div>
  </b-card>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import PaymentEdit from '../wizard/components/stepper/Payment'
import AddressesEdit from '../wizard/components/stepper/Shipping'

export default {
  name: 'AutoshipEdit',
  components: {
    PaymentEdit,
    AddressesEdit,
  },
  props: ['orderId'],
  data() {
    return {
      tabIndex: 0,
    }
  },
  computed: {
    ...mapGetters(['getAutoshipSubscriptionDetail', 'isLoading', 'getSelectedCountry']),
  },
  async mounted() {
    await this.loadAutoshipSubscriptionDetail(this.orderId)
    let autoshipCountryId =
      this.$helpers.getValue(this.getAutoshipSubscriptionDetail, 'country_id') || this.getSelectedCountry.id
    this.setAutoshipCountry(autoshipCountryId)
  },
  methods: {
    ...mapActions(['loadAutoshipSubscriptionDetail', 'setAutoshipCountry']),
    backToDetails() {
      this.$router.push({ name: 'AutoshipDetail', params: { autoshipId: this.orderId } })
    },
    linkClass(idx) {
      if (this.tabIndex === idx) {
        return ['text-white', 'font-weight-bold', 'bg-primary', 'rounded-0']
      } else {
        return ['text-black-50', 'rounded-0']
      }
    },
  },
}
</script>
