<template>
  <div class="card p-card pb-3 mb-3 mx-2 position-relative">
    <div class="position-absolute nfts d-flex flex-column">
        <div v-if="blackNftAvailable" class="black">Black NFT</div>
        <div v-if="goldNftAvailable" class="gold">Gold NFT</div>
        <div v-if="silverNftAvailable" class="silver">Silver NFT</div>
    </div>
    <h4 class="card-custom-title">
      {{ $t(i18nConst.myPageBalancesTitle) }}
    </h4>
    <hr>
    <div class="row">
      <div class="col-12 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">METADEXDAO</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between">
        <div>
            <img src="@/assets/logo_blackback.png" class="img-metadex" />
        </div>
        <div class="text-end">
          <p>{{utils.formatDisplayAmountMetadexWithEthers(balanceNotFormatted)}}</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">USDC</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between">
        <div>
            <img src="@/assets/usd_coin_usdc_logo.png" class="img-metadex" />
        </div>
        <div class="text-end">
          <p>{{ utils.formatDisplayAmountUsdcWithEthers(balanceUsdcNotFormatted) }}</p>
        </div>
      </div>
      <!-- <div class="col-12 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">MATIC</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between">
        <div>
            <img src="@/assets/crypto/currency/polygon-matic-logo.png" class="img-metadex" />
        </div>
        <div class="text-end">
          <p>{{ utils.formatDisplayAmountWithEthers(balanceMaticNotFormatted, 18) }}</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-center">
        <div class="text-center">
          <p style="font-weight: bold;">WMATIC</p>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between">
        <div>
            <img src="@/assets/crypto/currency/polygon-matic-logo.png" class="img-metadex" />
        </div>
        <div class="text-end">
          <p>{{ utils.formatDisplayAmountWithEthers(balanceWmaticNotFormatted, 18) }}</p>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import web3Utils from "@/utils/web3.utils.js";
import i18nConstantes from "@/constantes/i18n.constantes.js";
import typeActions from "@/store/typeActions";

export default {
    name: "MyPageBalances",
    data() {
        return {
            utils: web3Utils,
            i18nConst: i18nConstantes,
        };
    },
    computed: {
        ...mapGetters("global", [
          "balanceNotFormatted", 
          "balanceUsdcNotFormatted", 
          //"balanceMaticNotFormatted",
          //"balanceWmaticNotFormatted",
          "blackNftAvailable", 
          "goldNftAvailable", 
          "silverNftAvailable"]),
    },
    mounted() {
        this.$store.dispatch(typeActions.getAllNfts);
    }
}
</script>

<style lang="scss" scoped>
.img-metadex {
  width: 30px;
  margin-right: 0.3rem;
}

.nfts {
    top: 10px;
    right: 10px;
    gap: 4px;
}

.black {
    height: 18px;
    width: 100px;
    border-radius: 8px;
    background-color: black;
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: small;
    font-weight: 300;
}

.gold {
    height: 18px;
    width: 100px;
    border-radius: 8px;
    background-color: #DAA520;
    color: black;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: small;
    font-weight: 300;
}

.silver {
    height: 18px;
    width: 100px;
    border-radius: 8px;
    background-color: #C0C0C0;
    color: black;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: small;
    font-weight: 300;
}
</style>