<template>
  <div>
    <h4 class="card-custom-title">
      Calculator
    </h4>
    <hr>
    <div class="row gy-3">
      <div class="col-12">
        <div class="d-flex flex-column flex-sm-row justify-content-around my-3">
          <div class="mb-3 mb-sm-0">
            <p class="h5 mb-0">METADEXDAO Price</p>
            <p class="fw-bold mb-0">{{ utils.formatDisplayAmount(parseFloat(metadexToUsdcPrice).toFixed(4)) }} USDC</p>
          </div>
          <div class="mb-3 mb-sm-0">
            <p class="h5 mb-0">APR</p>
            <p class="fw-bold mb-0">{{ constantes.staking.apr }}</p>
            <p class="mb-0">This calculator is using a {{ constantes.staking.apy }} APY (daily compound)</p>
          </div>
          <div>
            <p class="h5 mb-0">METADEXDAO Balance</p>
            <p class="fw-bold mb-0">{{ utils.formatDisplayAmountMetadexWithEthers(balanceNotFormatted) }}</p>
          </div>
        </div>
      </div>

      <div class="col-12 col-sm-6">
        <label for="calcAmount" class="form-label">
          METADEXDAO Amount
        </label>
        <input id="calcAmount" type="text" class="form-control" v-model="metadexAmount" @change="updateCalculation">
      </div>
      <div class="col-12 col-sm-6">
        <label for="calcPriceEvolution" class="form-label">
          Evolution of METADEXDAO Price
        </label>
        <select id="calcPriceEvolution" class="form-select" v-model="metadexEvolution" @change="updateCalculation">
          <option v-for="(priceEvolution, index) in priceEvolutions" :selected="priceEvolution == 0" :key="index" :value="priceEvolution">{{ priceEvolution }}%</option>
        </select>
      </div>
      <div class="col-12">
        <label for="calcDuration" class="form-label">
          {{ inputMonths }} Month(s)
        </label>
        <input id="calcDuration" type="range" v-model="inputMonths" class="form-range" min="0" max="60" step="1" @change="updateCalculation">
      </div>
      <div class="col-12">
        <table class="table">
          <tbody>
            <tr>
              <td>
                Total interest earned
              </td>
              <td class="text-end">
                {{ utils.formatDisplayAmount(parseFloat(metadexRewards).toFixed(4)) }} METADEXDAO
              </td>
            </tr>
            <tr>
              <td>
                Potential return
              </td>
              <td class="text-end">
                {{ utils.formatDisplayAmount(parseFloat(potentialReturn).toFixed(4)) }} USDC
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: "StakingCalculator",
    data() {
      return {
        i18nConst: i18nConstantes,
        constantes: constantes,
        utils: web3Utils,
        inputMonths: '12',
        metadexRewards: 0,
        potentialReturn: 0,
        metadexAmount: 0,
        metadexEvolution: 0
      }
    },
    computed: {
      ...mapGetters("global", ["balanceNotFormatted"]),
      ...mapGetters("liquidityPool", ["metadexToUsdcPrice"]),
      priceEvolutions() {
        const startPoint = -30,
          endPoint = 30,
          step = 5;

        let priceEvolutions = [];
        for (let i = startPoint; i <= endPoint; i += step) {
          priceEvolutions.push(i);
        }

        return priceEvolutions;
      },
    },
    methods: {
      updateCalculation() {
        const finalMetadexToUsdcPrice = this.metadexToUsdcPrice * (1 + (this.metadexEvolution / 100));

        const principal = parseFloat(this.metadexAmount);
        const years = parseInt(this.inputMonths) / 12;
        const rate = 0.12;

        const interestAmount = (principal * (Math.pow((1 + rate / 365), (365) * (years)))) - principal;

        this.metadexRewards = interestAmount;
        this.potentialReturn = (interestAmount + parseFloat(this.metadexAmount)) * finalMetadexToUsdcPrice;
      }
    },
  mounted() {
      this.$store.dispatch(typeActions.updateMetadexToUsdcPrice)
    }
  }
</script>

<style scoped>

</style>
