<template>
  <div class="dashboard-panel-element rounded-0 px-3" v-can:view="'auto-ship'">
    <b-row>
      <b-col sm="12">
        <b-card no-body>
          <b-row>
            <b-col cols="12">
              <div class="my-3">
                <b-button
                  variant="primary"
                  class="lifted px-3"
                  :to="{ name: 'AutoshipSelectProduct', params: { page: 1 } }"
                  data-qa="autoship-autoship-subscription-list-add-autoship-btn"
                >
                  <icon name="eshop-plus" class="icon-size-2" style="margin-top: -2px;"></icon>
                  <span>{{ $t('Autoship.Button.AddAutoship') }}</span>
                </b-button>
              </div>
              <div class="overflow-x-auto">
                <b-table
                  hover
                  bordered
                  show-empty
                  stacked="lg"
                  :fields="fields"
                  :items="getAutoshipSubscriptionList"
                  :busy="isLoading(['loadingSubscriptionList'])"
                >
                  <template v-slot:empty>
                    <div class="text-center text-primary my-2">
                      <strong class="h4">{{ $t('Common.RecordNotFound') }}</strong>
                    </div>
                  </template>
                  <template v-slot:table-busy>
                    <div class="text-center text-primary my-2">
                      <b-spinner class="mx-2" />
                      <strong class="h4">{{ $t('Common.Loading') }}</strong>
                    </div>
                  </template>
                  <!--table columns-->
                  <template v-slot:cell(index)="row">
                    {{ row.index + 1 }}
                  </template>
                  <template v-slot:cell(autoship_id)="row">
                    {{ row.item.code }}
                  </template>
                  <template v-slot:cell(ship_to)="row">
                    {{ generateAddress(row.item.shipping_address) }}
                  </template>
                  <template v-slot:cell(billing_cycle)="row">
                    <span class="text-capitalize">{{ getBillingCycle(row.item.recurring_frequency) }}</span>
                  </template>
                  <template v-slot:cell(credit_card_number)="row">
                    {{ getCreditCard(row.item.card) }}
                  </template>
                  <template v-slot:cell(total)="row">
                    <span>{{ row.item.currency_code }} {{ row.item.amount }}</span>
                  </template>
                  <template v-slot:cell(status)="row">
                    <span :class="row.item.deleted_at === null ? 'text-amp' : 'text-danger'">
                      {{
                        row.item.deleted_at === null
                          ? $t('Autoship.Status.Active.Label')
                          : $t('Autoship.Status.Terminated.Label')
                      }}
                    </span>
                  </template>
                  <template v-slot:cell(details)="row">
                    <b-btn
                      class="p-0"
                      variant="link"
                      @click="viewAutoshipDetail(row.item.subscription_id)"
                      :title="$t('Autoship.AutoshipDetail')"
                      data-qa="autoship-autoship-subscription-list-autoship-detail-btn"
                    >
                      <span class="d-lg-none pr-1">{{ $t('Common.MoreDetails') }}</span>
                      <icon name="next-icon" class="text-primary icon-size-3" />
                    </b-btn>
                  </template>
                </b-table>
              </div>
            </b-col>
            <b-col class="eshop">
              <pagination
                v-show="!isLoading('loadingSubscriptionList')"
                class="eshop-pagination text-center"
                name="autoship-listing"
                :total="getAutoshipSubscriptionPaginationMeta.total"
                :per-page="getAutoshipSubscriptionPaginationMeta.per_page"
                data-qa-prefix="autoship-autoship-subscription-list"
              />
            </b-col>
          </b-row>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import Pagination from '@/app/_global/components/elements/Pagination'
import { AUTOSHIP_SELECT_PRODUCT, AUTOSHIP_SUBSCRIPTION_DETAIL } from '@/config/url-prefix'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AutoshipSubsciptionList',
  components: { Pagination },
  data() {
    return {
      fields: [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'autoship_id', label: this.$t('Autoship.AutoshipNo') },
        { key: 'ship_to', label: this.$t('Common.ShippingAddress') },
        { key: 'next_bill_date', label: this.$t('Autoship.NextBillDate') },
        { key: 'billing_cycle', label: this.$t('Autoship.BillingCycle') },
        { key: 'credit_card_number', label: this.$t('Common.Payment.CreditCard') },
        { key: 'total', label: this.$t('Common.Sales.Total'), class: ['text-lg-right'] },
        { key: 'status', label: this.$t('Common.Status'), class: ['text-lg-center'] },
        {
          key: 'details',
          label: this.$t('Autoship.AutoshipDetail'),
          class: ['text-lg-center'],
          thClass: ['text-lg-hide'],
        },
      ],
      sort: {
        status: 'desc',
        createdAt: 'desc',
      },
    }
  },
  mounted() {
    this.unsetAutoshipCountry()
  },
  computed: {
    ...mapGetters([
      'getAutoshipSubscriptionList',
      'getAutoshipSubscriptionPaginationMeta',
      'getPagination',
      'isLoading',
    ]),
  },
  methods: {
    ...mapActions(['loadAutoshipSubscriptionList', 'unsetAutoshipCountry']),
    getCreditCard(card) {
      return `[${card.card_type}]  ${card.card_number}  Exp: ${card.card_expiry}`
    },
    generateAddress(address) {
      return address.hasOwnProperty('self_collection_point_id')
        ? this.$t('Autoship.ShipTo.StockistsLocation.Label')
        : this.$helpers.getValue(address, 'recipient_addresses[0].fields[0].value') || '-'
    },
    viewAutoshipDetail(id) {
      let route = [AUTOSHIP_SUBSCRIPTION_DETAIL, id].join('/')
      this.$router.push(route)
    },
    getSubscriptionList() {
      let payload = {
        page: this.$route.params.page,
        'sort[status]': this.sort.status,
        'sort[created_at]': this.sort.createdAt,
      }
      this.loadAutoshipSubscriptionList(payload)
    },
    getBillingCycle(frequency) {
      return (frequency === 1 && this.$t('Autoship.Frequency.Monthly')) || '-'
    },
  },
  watch: {
    '$route.params.page': {
      handler: 'getSubscriptionList',
      immediate: true,
    },
  },
}
</script>
