<template>
    <div class="card p-card pb-3 mb-3 mx-2">
      <div class="d-flex flex-row justify-content-between">
        <h4 class="card-custom-title">
          {{ $t(i18nConst.stakingMetadexTitle) }}
        </h4>
        <h4 class="card-custom-title">
          APR {{ constantes.staking.apr }}
        </h4>
      </div>
      <hr>
      <div class="row">
        <div class="col-12 d-flex justify-content-between">
          <div class="col-6 d-flex align-items-center">
              {{ $t(i18nConst.stakingAmount) }}  
          </div>
          <div class="col-6">
              <input class="form-control" type="number" min="0" id="stakeMetadexInput" @keypress="checkNumber($event)"  placeholder="METADEX" v-model="amount" >
          </div>
        </div>
      </div>
      <div class="d-flex flex-row justify-content-end">
        <span class="d-flex balance-amount ">Balance: {{utils.formatDisplayAmountMetadexWithEthers(balanceNotFormatted)}} <span class="text-danger cursor-pointer" @click="setMaxAmount">Max</span></span>
      </div>
      <template v-if="!actionInProgress">
        <button v-if="allowanceStaking > 0" id="stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-4"
          :class="disabledClass" @click="stakeMetadex">{{ $t(i18nConst.stakingStakeMetadexButton) }}</button>
        <button v-else id="allowance-stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-4"
          @click="allowanceStakeMetadex">{{ $t(i18nConst.stakingAllowanceStakeMetadexButton) }}</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 constantes from "@/constantes/constantes.js";
  import typeActions from "@/store/typeActions";
import { mapGetters } from 'vuex';
import web3Utils from "@/utils/web3.utils.js";
import { Token } from '@uniswap/sdk-core'; 
import { ethers } from 'ethers';
import constantesService from "@/services/constantes.service";
  
  export default {
      name: "StakingMetadex",
      data() {
          return {
              i18nConst: i18nConstantes,
              constantes: constantes,
              amount: 0,
              utils: web3Utils,
          };
      },
      computed: {
          ...mapGetters('global', ['allowanceStaking', 'balanceNotFormatted']),
          ...mapGetters('staking', ['actionInProgress']),
          
          disabledClass() {
            if (this.amount < 1) {
              return 'disabled btn-primary';
            } else {
              return '';
            }
          }
      },
      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();
            }
        },
        async stakeMetadex() {
            // eslint-disable-next-line no-undef
            //const amountFormated = BigInt(this.amount * 1000000000000000000);
            
            // eslint-disable-next-line no-undef
            //const amountFormated = BigInt(this.amount) * (10n ** 18n); 

            const TokenMetadex = new Token(constantesService.getConstanteNetwork("chainId"), constantesService.getConstanteNetwork("addressSmartContractErc20Token"), 18, 'METADEX', 'METADEX');
            const amountFormated =  ethers.utils.parseUnits(this.amount.toString(), TokenMetadex.decimals);
            //console.log("test => ", test.toString());

            await this.$store.dispatch(typeActions.stakeMetadex, amountFormated);
            this.amount = 0;
        },
        allowanceStakeMetadex() {
          this.$store.dispatch(typeActions.addAllowanceStaking);
        },
        setMaxAmount() {
          const _amount = this.utils.formatAmountMetadexWithEthers(this.balanceNotFormatted);
          this.amount = _amount;
        }
      },
      mounted() {
        this.$store.dispatch(typeActions.getAllowanceStaking);
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .img-metadex {
    width: 30px;
    margin-right: 0.3rem;
  }

  .balance-amount {
    //margin-top: -15px;
    font-size: smaller;
    margin-bottom: 10px;
    gap: 5px;
    z-index: 10;
  }

  .cursor-pointer {
    cursor: pointer;
  }
  
  
  </style>