<template>
    <div class="card p-card pb-3 mb-3 mx-2">
      <h4 class="card-custom-title">
        {{ $t(i18nConst.stakingInterestTitle) }}
      </h4>
      <hr>

      <div class="row">
        <div class="col-12 d-flex card-bc-item justify-content-between">
            <div class="col-6 d-flex align-items-center">
                {{ $t(i18nConst.stakingStakeMetadexBalance) }}  
            </div>
            <div class="col-6 d-flex justify-content-end">
                <span>{{ utils.formatDisplayAmountMetadexWithEthers(stakingBalance) }}</span>
            </div>
        </div>
        <div class="col-12 d-flex card-bc-item justify-content-between">
            <div class="col-6 d-flex align-items-center">
                {{ $t(i18nConst.stakingInterestAmount) }}  
            </div>
            <div class="col-6 d-flex justify-content-end">
                <span>{{ utils.formatDisplayAmountMetadexWithEthers(interestsAvailable) }}</span>
            </div>
        </div>
      </div>
      <template v-if="!actionInProgress">
        <button id="stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-2" :class="isRestakePossible"
          @click="restakeInterest">{{ $t(i18nConst.stakingRestakeInterestButton) }}</button>
        <button id="stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-4" :class="isRealeaseInterestPossible"
          @click="releaseInterest">{{ $t(i18nConst.stakingReleaseInterestButton) }}</button>
      </template>
      <template v-else>
        <button id="confirm-buy-btn" type="button" class="btn btn-primary disabled w-100 mb-4">
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
          </button>
      </template>
    </div>
  </template>
  
  <script>
  import i18nConstantes from "@/constantes/i18n.constantes.js";
  import typeActions from "@/store/typeActions";
import { mapGetters } from 'vuex';
import web3Utils from "@/utils/web3.utils.js";
  
  export default {
      name: "StakingInterest",
      data() {
          return {
            utils: web3Utils,
              i18nConst: i18nConstantes,
              amount: 0,
              interestAmount: 0,
              timer: -1,
          };
      },
      computed: {
          ...mapGetters('staking', ['interestsAvailable', 'stakingBalance', 'actionInProgress']),
          isRestakePossible() {
            if (this.interestsAvailable) {
              //if (this.interestsAvailable < (1 * 1000000000000000000)) {
              if (this.interestsAvailable > 0) {
                return '';
              } else {
                return 'disabled btn-primary';
              }
            } else {
              return 'disabled btn-primary';
            }
          },
          isRealeaseInterestPossible() {
            if (this.interestsAvailable) {
              //if (this.interestsAvailable < (1 * 1000000000000000000)) {
              if (this.interestsAvailable > 0) {
                return '';
              } else {
                return 'disabled btn-primary';
              }
            } else {
              return 'disabled btn-primary';
            }
          }
      },
      methods: {
        checkNumber(evt) {
            evt = evt ? evt : window.event;
            var charCode = evt.which ? evt.which : evt.keyCode;
        
            if (charCode >= 48 && charCode <= 57){
            return true;
            } else if (charCode == 44 || charCode == 46){
                return true;
            } else {
            evt.preventDefault();
            }
        },
        stakeMetadex() {
            // eslint-disable-next-line no-undef
            const amountFormated = BigInt(this.amount * 1000000000000000000);
            this.$store.dispatch(typeActions.stakeMetadex, amountFormated);
        },
        async getInterestAmount() {
          this.interestAmount = await this.$store.dispatch(typeActions.calculateStakerInterest);
        },
        async restakeInterest() {
          this.$store.dispatch(typeActions.restakeInterest);
        },
        async releaseInterest() {
          this.$store.dispatch(typeActions.releaseStakingInterest);
        },
      },
      mounted() {
        this.getInterestAmount();
        this.timer = setInterval(() => {
          if (this.stakingBalance > 0) {
            this.getInterestAmount();
          }
        }, 30000);
      },
      beforeUnmount() {
        clearInterval(this.timer);
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .img-metadex {
    width: 30px;
    margin-right: 0.3rem;
  }
  
 
  
  </style>