<template>
  <modal-template is-footer-hide>
    <template v-slot:title>
      <div class="text-capitalize">
        {{ $t('MyAccount.AmpPreference.SettingHistory.ModelTitle') }}
      </div>
    </template>

    <template slot="body">
      <b-table
        hover
        bordered
        show-empty
        :fields="ampLogFields"
        :items="getAmpLogData.items"
        :busy="isLoading('loadingAmpChangeLog')"
      >
        <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>
      </b-table>

      <b-pagination
        v-if="getAmpLogData.total > maxRowsOfRecord"
        v-show="!isLoading('loadingAmpChangeLog')"
        align="center"
        v-model="currentPage"
        hide-goto-end-buttons
        :per-page="maxRowsOfRecord"
        :limit="paginatorOptionsLimit"
        :total-rows="getAmpLogData.total"
        :next-text="$t('Common.Paginator.Next')"
        :prev-text="$t('Common.Paginator.Previous.Short')"
      />
    </template>
  </modal-template>
</template>

<script>
import ModalTemplate from '@/elements/common/components/modalTemplate'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'AmpLogModal',
  components: { ModalTemplate },
  props: {
    ampValueMapper: { type: Array, required: true },
  },
  data() {
    return {
      ampLogFields: [
        { key: 'username', label: this.$t('MyAccount.AmpPreference.SettingHistory.TableHeader.ChangeBy') },
        { key: 'amp_preference', label: this.$t('MyAccount.AmpPreference.SettingHistory.TableHeader.AmpPreference') },
        { key: 'updated_at', label: this.$t('MyAccount.AmpPreference.SettingHistory.TableHeader.UpdatedAt') },
      ],
      ampLogData: {},
      currentPage: 1,
      maxRowsOfRecord: 10,
      paginatorOptionsLimit: 3,
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getAmpLogData() {
      return { items: this.ampLogData.data || [], total: this.ampLogData.total || 0 }
    },
  },
  methods: {
    ...mapActions(['loadUserAmpChangeLog']),
    show() {
      this.currentPage = 1
      this.loadAmpRecord()
      this.$bvModal.show('modal')
    },
    loadAmpRecord() {
      let payload = {
        limit: this.maxRowsOfRecord,
        offset: this.maxRowsOfRecord * (this.currentPage - 1),
        order_by: 'DESC',
      }
      this.loadUserAmpChangeLog(payload).then(res => {
        res = res || {}
        if (res.data) {
          res.data = res.data.map(record => {
            let ampType = this.ampValueMapper.find(type => type.value === record.amp_preference) || {}
            return {
              ...record,
              amp_preference: ampType.text || '-',
            }
          })
        }

        this.ampLogData = { ...res }
      })
    },
  },
  watch: {
    currentPage: {
      handler() {
        this.loadAmpRecord()
      },
    },
  },
}
</script>
