<template>
  <div>
    <div class="row">
      <div class="col-3">
        <div class="row">
          <div class="col-3">
            <img src="@/assets/logo_blackback.png" class="img-fluid" />
          </div>
          <div class="col-8">
            <div class="row"><b class="p-0">{{ $t(i18nConst.vestingLocked) }}<span
                  style="color: var(--text-grey)"></span></b></div>
            <div class="row">{{ totalAmountLockedAllSchedules }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-3 mb-2">
      <div class="dropdown-center">
        <div class="btn-group dropend">
          <button class="btn btn-secondary btn dropdown-toggle"
            style="color: var(--black-custom); background-color: var(--grey-custom);" type="button"
            data-bs-toggle="dropdown" aria-expanded="false">
            <span><b>{{ $t(i18nConst.vestingRounds) }}</b></span>
          </button>
          <ul class="dropdown-menu drop-down-menu-custom">
            <li @click="updateVestingRoundBlock(vr)" class="dropdown-item" v-for="vr in vestingRoundsCount" :key="vr">{{
                vr
            }}</li>
          </ul>
        </div>
      </div>
    </div>
    <hr>
    <div class="flex-row d-flex justify-content-between align-items-center">
      <span><b>
          <h5>{{ $t(i18nConst.vestingAvailableForWithdrawal) }}</h5>
        </b></span>
      <div class="d-flex align-items-center">
        <h5 class="mb-0" style="display: inline;">{{ totalAmountReleasableAllSchedules }}</h5>&nbsp;
        <img src="@/assets/logo_blackback.png" class="img-fluid" style="height:1.5rem" />
      </div>
    </div>
    <div class="mt-3 overflow-hidden">
      <div class="table-responsive">
        <table class="table rounded rounded-3 table align-middle" style="background-color: var(--grey-custom);">
          <thead>
            <tr>
              <th scope="col">{{ $t(i18nConst.vestingPeriod) }}</th>
              <th scope="col">{{ $t(i18nConst.vestingReleaseDate) }}</th>
              <th scope="col">{{ $t(i18nConst.vestingAmount) }}</th>
              <th scope="col">{{ $t(i18nConst.vestingRatio) }}</th>
              <th class="text-center" scope="col">{{ $t(i18nConst.vestingWithdrawFromSC) }}</th>
            </tr>
          </thead>
          <tbody v-if="(this.vestingSchedulesInfo).length == this.vestingSchedulesCount">
            <tr v-for="r in roundMultiple" :key="r">
              <th scope="row">{{ currentFirstScheduleIndex + r }}</th>
              <td>{{ vestingSchedulesInfo[currentFirstScheduleIndex + r - 1].realeaseDateFormatted }}</td>
              <td v-if="currentRoundAmounts">{{ currentRoundAmounts[r - 1] }}</td>
              <td v-if="currentRoundRatios">{{ currentRoundRatios[r - 1] }}%</td>
              <vesting-withdrawal-button :loopIndex="r" :currentFirstScheduleIndex="currentFirstScheduleIndex"
                :roundMultiple="roundMultiple">
              </vesting-withdrawal-button>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import VestingWithdrawalButton from './VestingWithdrawalButton.vue';
import i18nConstantes from "@/constantes/i18n.constantes.js";
import constantes from "@/constantes/constantes.js";
import { mapGetters } from "vuex";
import web3Utils from "../../../utils/web3.utils";

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
      constantes: constantes,

      currentVestingRound: 1,
      isGenesisInvestor: false
    }
  },
  components: {
    VestingWithdrawalButton
  },
  computed: {
    ...mapGetters("vesting", [
      "vestingSchedulesCount",
      "vestingSchedulesInfo"
    ]),
    ...mapGetters("global", [
      "web3"
    ]),
    /**
     * computes first period number for current selected round
     **/
    currentFirstScheduleIndex() {
      return this.currentVestingRound * this.roundMultiple - this.roundMultiple;
    },
    /**
     * computes vesting periods' amounts for current selected round
     **/
    currentRoundAmounts() {
      const amount = [];
      for (let i = 0; i < this.roundMultiple; i++) {
        if (this.vestingSchedulesInfo[this.currentFirstScheduleIndex + i]) {
          amount[i] = Number(web3Utils.formatAmountMetadex(this.vestingSchedulesInfo[this.currentFirstScheduleIndex + i].amountTotal, this.web3));
        }
      }
      return amount;
    },
    /**
     * computes a boolean array that tells if each vesting period is releasable or not
     **/
    allRoundsReleasableSchedules() {
      const releasableVestingSchedules = [];
      for (let i = 0; i < this.vestingSchedulesCount; i++) {
        releasableVestingSchedules[i] = new Date(parseInt(this.vestingSchedulesInfo[i].cliff) * 1000) < Date.now();
        releasableVestingSchedules[i] = releasableVestingSchedules[i] && !this.vestingSchedulesInfo[i].revoked;
        if (parseInt(this.vestingSchedulesInfo[i].released) > 0) {
          releasableVestingSchedules[i] = false;
        }
      }
      return releasableVestingSchedules;
    },
    /**
     * computes an array of the percentages of the total amount to be vested in each period  
     **/
    currentRoundRatios() {
      const ratios = [];
      let total = (this.currentRoundAmounts).reduce((a, b) => a + b, 0);
      for (let i = 0; i < this.roundMultiple; i++) {
        ratios[i] = Math.round((this.currentRoundAmounts[i] / total) * 100);
      }
      return ratios;
    },
    /**
     * computes the total amount that can be withdrawn by users for each vesting period
     **/
    totalAmountReleasableAllSchedules() {
      let totalAmount = 0;
      for (let i = 0; i < this.vestingSchedulesCount; i++) {
        if (this.allRoundsReleasableSchedules[i]) {
          totalAmount += parseInt(this.vestingSchedulesInfo[i].amountTotal);
        }
      }
      return web3Utils.formatAmountMetadex(totalAmount, this.web3);
    },
    /**
     * computes the total amount that is locked inside vesting SC, which cannot be withdrawn by users
     **/
    totalAmountLockedAllSchedules() {
      let amountLocked = 0;
      for (let i = 0; i < this.vestingSchedulesCount; i++) {
        if (!this.allRoundsReleasableSchedules[i]
          && this.vestingSchedulesInfo[i].released == 0
        ) {
          amountLocked += parseInt(this.vestingSchedulesInfo[i].amountTotal);
        }
      }
      return web3Utils.formatAmountMetadex(amountLocked, this.web3);
    },
  },
  methods: {
    async updateVestingRoundBlock(vestingRound) {
      this.currentVestingRound = vestingRound;
    }
  },
  props: {
    roundMultiple: Number,
    vestingRoundsCount: Number,
  },
}
</script>
<style socped>
.table-rounded thead th {
  border: none;
}

.table-rounded thead th:first-child {
  border-radius: 2rem 0 0 0;
}

.table-rounded thead th:last-child {
  border-radius: 0 2rem 0 0;
}

.table-rounded tbody td {
  border: none;
}

.table-rounded tbody tr:last-child td:first-child {
  border-radius: 0 0 0 2rem;
}

.table-rounded tbody tr:last-child td:last-child {
  border-radius: 0 0 2rem 0;
}
</style>
