<template>
  <my-account-tabs-template>
    <b-row>
      <b-col md="6" cols="12">
        <b-row>
          <amp-preference v-model="selectedAmpPreference" layout="horizontal" />
        </b-row>
        <div>
          <b-button variant="link" @click="openAmpHistoryModal" class="p-0">
            {{ $t('MyAccount.AmpPreference.SettingHistory') }}
          </b-button>
        </div>
      </b-col>
      <b-col md="6" cols="12">
        <b-row align-h="center">
          <b-col cols="12">
            <h5>
              {{ $t('MyAccount.AmpPreference.AmpAllocations.Title') }}
              <icon class="mb-1" name="info-circle-icon"></icon>
            </h5>
            <b-table
              outlined
              bordered
              stacked="md"
              :current-page="currentPage"
              :per-page="perPage"
              :fields="fields"
              :responsive="true"
              striped
              hover
              :items="getAmpTableItems"
              show-empty
            >
              <template v-slot:empty="scope">
                <h6 class="text-center">{{ $t('Common.Table.NoRecords.Msg') }}</h6>
              </template>
            </b-table>
          </b-col>
          <b-col cols="6">
            <b-pagination
              :total-rows="getAmpTableItems.length"
              v-model="currentPage"
              :per-page="perPage"
              align="fill"
              size="xs"
            ></b-pagination>
          </b-col>
        </b-row>
      </b-col>

      <b-col v-if="initAmpPreference !== selectedAmpPreference" cols="12" class="text-right animated fadeInUp">
        <b-button variant="primary" @click="updateAmpPreferences">
          <b-spinner v-show="isLoading('updatingAmpPreference')" small class="mr-1" />
          <span>{{ $t('Common.SaveChanges') }}</span>
        </b-button>
      </b-col>
    </b-row>

    <amp-log-modal :amp-value-mapper="ampPreferenceOptions" ref="amp_log_model" />
  </my-account-tabs-template>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AmpLogModal from '@/app/my-account/dashboard/components/blocks/AmpLogModal'
import MyAccountTabsTemplate from '@/app/my-account/dashboard/components/templates/MyAccountTabsTemplate'
import AmpPreference from '@/app/_global/components/blocks/AmpPreference'

export default {
  name: 'Settings',
  components: {
    AmpLogModal,
    MyAccountTabsTemplate,
    AmpPreference,
  },
  data() {
    return {
      initAmpPreference: 0,
      selectedAmpPreference: 0,
      ampPreferenceOptions: [
        { value: 0, text: this.$t('MyAccount.AmpPreference.AutoMaintenanceSalesSetting.Stack') },
        { value: 1, text: this.$t('MyAccount.AmpPreference.AutoMaintenanceSalesSetting.Append') },
      ],
      fields: [
        { key: 'cw_name', label: this.$t('Common.Terminology.PayCycle') },
        { key: 'cv', label: this.$t('Common.Terminology.Bv') },
      ],
      currentPage: 1,
      perPage: 5,
    }
  },
  computed: {
    ...mapGetters(['isLoading', 'getAmpAccumulations']),
    getAmpTableItems() {
      return this.getAmpAccumulations.map(x => {
        return {
          cw_name: x.cw.cw_name,
          cv: x.cv,
          upgrade_cv: x.upgrade_cv,
        }
      })
    },
  },
  mounted() {
    this.loadMemberAmpPreference().then(currentPlacement => {
      if (Number.isInteger(currentPlacement)) {
        this.initAmpPreference = currentPlacement
        this.selectedAmpPreference = currentPlacement
      } else {
        this.$swal({
          type: 'error',
          title: this.$t('MyAccount.AmpPreference.LoadingFail'),
          text: this.$t('Common.Error.ActionFailure.HelpText'),
        })
      }
    })
  },
  methods: {
    ...mapActions(['loadMemberAmpPreference', 'updateMemberAmpPreferences']),
    async updateAmpPreferences() {
      let payload = { preference: this.selectedAmpPreference }
      await this.updateMemberAmpPreferences(payload).then(nextPlacement => {
        let result = Number.isInteger(nextPlacement)
        if (result) {
          this.initAmpPreference = nextPlacement
        }

        this.$swal({
          type: (result && 'success') || 'error',
          title: this.$t((result && 'MyAccount.AmpPreference.Update.Success') || 'MyAccount.AmpPreference.Update.Fail'),
          text: this.$t(
            (result && 'MyAccount.AmpPreference.Update.Success.Description') || 'Common.Error.ActionFailure.HelpText'
          ),
        })
      })
    },
    openAmpHistoryModal() {
      this.$refs['amp_log_model'].show()
    },
  },
}
</script>
