<template>
    <div class="card p-card pb-3 mb-3 mx-2">
      <h4 class="card-custom-title">
        {{ $t(i18nConst.unstakingMetadexTitle) }}
      </h4>
      <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 ">{{ $t(i18nConst.stakingStakeMetadexBalance) }}: {{utils.formatDisplayAmountMetadexWithEthers(stakingBalance)}} <span class="text-danger cursor-pointer" @click="setMaxAmount">Max</span></span>
      </div>
      <template v-if="!actionInProgress">
        <button id="stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-2"
          :class="disabledBalance"
          @click="unstakeMetadex">{{ $t(i18nConst.unstakingStakeMetadexButton) }}</button>
        <button id="stake-metadex-btn" type="button" class="btn btn-meta-1 w-100 mb-4"
          :class="disabledInterestAndBalance"
          @click="unstakeAndRealeaseInterest">{{ $t(i18nConst.unstakeAndReleaseInterestButton) }}</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: "UnstakingMetadex",
      data() {
          return {
              i18nConst: i18nConstantes,
              constantes: constantes,
              amount: 0,
              utils: web3Utils,
          };
      },
      computed: {
        ...mapGetters('staking', ['actionInProgress', 'interestsAvailable', 'stakingBalance']),
        disabledInterestAndBalance() {
          if (this.interestsAvailable <= 0 || this.stakingBalance <= 0) {
            return 'disabled btn-primary';
          } else {
            return '';
          }
        },
        disabledBalance() {
          if (this.stakingBalance <= 0) {
            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 unstakeMetadex() {
            // eslint-disable-next-line no-undef
            //const amountFormated = BigInt(this.amount) * (10n ** 18n);
            //const amountFormated = BigInt(this.amount * 1000000000000000000);
            const TokenMetadex = new Token(constantesService.getConstanteNetwork("chainId"), constantesService.getConstanteNetwork("addressSmartContractErc20Token"), 18, 'METADEX', 'METADEX');
            const amountFormated =  ethers.utils.parseUnits(this.amount.toString(), TokenMetadex.decimals);
            await this.$store.dispatch(typeActions.unstakeMetadex, amountFormated);
            this.amount = 0;
        },
        async unstakeAndRealeaseInterest() {
          await this.$store.dispatch(typeActions.unstakeAndReleaseInterest);
        },
        setMaxAmount() {
          const _amount = this.utils.formatAmountMetadexWithEthers(this.stakingBalance);
          this.amount = _amount;
        }
      }
  }
  </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>