<template>
  <div>
    <b-row>
      <b-col cols="6" md="4" lg="3" xl="2" class="pr-1">
        <custom-date-picker
          v-model="fromDate"
          name="fromDateField"
          display-date-format="yyyy-MM-dd"
          :placeholder="$t('Common.FromDate')"
          :disable-date-range="getAvailableFromDate"
          data-qa="eWallet-TransferRecord-fromDate-select"
        />
      </b-col>
      <b-col cols="6" md="4" lg="3" xl="2" class="pl-1">
        <custom-date-picker
          v-model="toDate"
          name="toDateField"
          display-date-format="yyyy-MM-dd"
          :placeholder="$t('Common.ToDate')"
          :wrapper-class="['to-date-picker']"
          :disable-date-range="getAvailableToDate"
          :calendar-class="['calender-container']"
          data-qa="eWallet-TransferRecord-toDate-select"
        />
      </b-col>
    </b-row>

    <b-row class="mt-3">
      <b-col>
        <b-table
          hover
          bordered
          show-empty
          :responsive="true"
          no-border-collapse
          :items="transactionData"
          :fields="transactionFields"
          :busy="isLoading('loadEWalletTransactionRecord')"
          :striped="!isLoading('loadEWalletTransactionRecord') && Boolean(transactionData.length)"
        >
          <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>

          <template v-slot:empty>
            <div class="text-center mt-5 mb-4">
              <template v-if="toDate || fromDate">
                <h4>{{ $t('Common.RecordNotFound') }}</h4>
              </template>
              <template v-else>
                <h4 class="mt-0">{{ $t('EWallet.EmptyTransaction') }}</h4>
                <p>{{ $t('EWallet.EmptyTransaction.HelpText') }}</p>
              </template>
              <b-img :src="emptyRecordArt" class="icon-size-5 mt-2"></b-img>
            </div>
          </template>

          <template v-slot:cell(transfer_to_user)="row">
            <span>{{ $helpers.getValue(row, 'value.old_member_id', '-') }}</span>
          </template>

          <template v-slot:cell(transaction_status)="row">
            <div class="font-weight-bolder mb-1" :class="getTransactionStatus(row.value.key).class">
              {{ getTransactionStatus(row.value.key).label }}
            </div>
            <div>{{ row.item.transaction_number }}</div>
          </template>

          <template v-slot:cell(id)="row">
            <b-button
              variant="link"
              :to="{ name: 'EWalletTransactionDetails', params: { transactionId: row.value.toString() } }"
            >
              <icon name="next-icon" class="icon-size-3"
            /></b-button>
          </template>
        </b-table>

        <b-pagination
          v-if="paginationMeta.totalRecord > paginationMeta.perPage"
          align="center"
          v-model="currentPage"
          hide-goto-end-buttons
          :per-page="paginationMeta.perPage"
          :total-rows="paginationMeta.totalRecord"
          :limit="paginationMeta.paginatorOptionsLimit"
          class="d-print-none font-size-5 mt-4"
          :next-text="$t('Common.Paginator.Next')"
          :prev-text="$t('Common.Paginator.Previous.Short')"
        />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import TransactionMixin from '@/app/ewallet/dashboard/mixins/transactionrecordTableMixin'
import CustomDatePicker from '@/elements/common/components/CustomDatePicker'

export default {
  name: 'EWalletTransferRecord',
  mixins: [TransactionMixin],
  components: { CustomDatePicker },
  data() {
    return {
      transactionFields: [
        {
          key: 'created_at',
          stickyColumn: true,
          formatter: this.dateFormatter,
          thClass: ['bg-light-extra', 'lighten-10'],
          label: this.$t('Common.Sales.TransactionDate'),
        },
        { key: 'transaction_details', label: this.$t('Common.Sales.TransactionDetails') },
        {
          key: 'transfer_to_user',
          label: this.$t('EWallet.EWalletTransferRecord.TableHeader.ToAccount'),
        },
        {
          key: 'amount',
          class: ['text-right'],
          label: this.$t('EWallet.Amount'),
        },
        {
          key: 'transaction_status',
          label: this.$t('EWallet.EWalletTransferRecord.TableHeader.StatusReference'),
        },
        {
          key: 'id',
          label: '',
          class: ['text-center', 'align-middle'],
        },
      ],
      transactionStatus: new Map([
        ['pending', { label: this.$t('EWallet.TransactionStatus.Pending') }],
        ['rejected', { label: this.$t('EWallet.TransactionStatus.Failed'), class: 'text-danger' }],
        ['cancelled', { label: this.$t('EWallet.TransactionStatus.Cancelled'), class: 'text-black-50' }],
        ['in_process', { label: this.$t('EWallet.TransactionStatus.Processing'), class: 'text-primary' }],
        ['successful', { label: this.$t('EWallet.TransactionStatus.Completed'), class: 'text-info-green' }],
      ]),
    }
  },
  watch: {
    fromDate() {
      this.currentPage === 1 ? this.loadTransactionRecord(0, 'debit') : (this.currentPage = 1)
    },
    toDate() {
      this.currentPage === 1 ? this.loadTransactionRecord(0, 'debit') : (this.currentPage = 1)
    },
    currentPage: {
      handler(val) {
        this.loadTransactionRecord(val - 1, 'debit')
      },
      immediate: true,
    },
  },
  methods: {
    getTransactionStatus(status) {
      return this.transactionStatus.get(status) || { class: 'd-none' }
    },
  },
}
</script>
