<template>
  <div class="row">
    <div class="col-12 p-0">
      <div class="card p-card">
        <figure class="title-figure">
          <blockquote class="blockquote d-flex flex-row justify-content-between">
            <span>{{ $t(i18nConst.earnAllowanceTitle) }}</span>
            <!-- <crypto-selector></crypto-selector> -->
          </blockquote>
          <figcaption class="blockquote-footer subtitle-card">
            {{ $t(i18nConst.earnAllowanceFlexSubtitle) }}
          </figcaption>
        </figure>
        <hr />
        <template v-if="!actionInProgress">
          <button id="confirm-allowance-btn" type="button" @click="addAllowanceBuyMetadex"
            class="btn btn-meta-1 w-100 mb-4">{{ $t(i18nConst.earnAllowanceButton) }}</button>
        </template>
        <template v-else>
          <button id="confirm-buy-btn" type="button" class="btn btn-primary disabled w-100 mb-4">{{
            $t(i18nConst.actionInProgress)
          }}</button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import i18nConstantes from "@/constantes/i18n.constantes.js";
import constantes from "@/constantes/constantes.js";
import typeActions from "@/store/typeActions";
import { mapGetters } from "vuex";
//import CryptoSelector from "../cryptoSelect/CryptoSelector.vue";

export default {
  // components: {
  //   CryptoSelector
  // },
  data() {
    return {
      i18nConst: i18nConstantes,
      constantes: constantes,
      amount: 0
    }
  },
  computed: {
    ...mapGetters("earn", ["actionInProgress"]),
    ...mapGetters("crypto", ["currentToken"]),
  },
  methods: {
    async addAllowanceBuyMetadex() {
      switch (this.currentToken.symbol) {
        case "USDC":
          await this.$store.dispatch(typeActions.addAllowanceEarn, { type: 'FLEX' });
          break;
        // case "MATIC":
        //   await this.$store.dispatch(typeActions.addAllowanceEarnWmatic, { type: 'FLEX' });
        //   break;
        default:
          break;
      }


      
    }
  }
}
</script>

<style scoped>

</style>