<template>
  <div class="row mb-4">
    <div class="col-12">
      <div class="card p-card">
        <h4 class="card-custom-title">
          {{ $t(i18nConst.vestingTitle) }}
        </h4>
        <hr>
        <div v-if="isVestingInfoCalled">
          <vesting-table :roundMultiple="roundMultiple" :vestingRoundsCount="vestingRoundsCount"></vesting-table>
        </div>
        <div v-if="isVestingActive && !isVestingInfoCalled" class="empty-card">
          <p class="empty-card-title">
            {{ $t(i18nConst.vestingLoadingVestingSchedules) }}
          </p>
          <p class="empty-card-description">
            {{ $t(i18nConst.vestingWaitVestingSchedules) }}
          </p>
        </div>
        <div v-if="!isVestingActive" class="empty-card">
          <p class="empty-card-title">
            {{ $t(i18nConst.vestingNoActiveVestingSchedules) }}
          </p>
          <p class="empty-card-description">
            <!-- {{ $t(i18nConst.vestingNoVestingSchdulesFoundForThisWallets) }} -->
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VestingTable from './VestingTable.vue';
import i18nConstantes from "@/constantes/i18n.constantes.js";
import constantes from "@/constantes/constantes.js";
import { mapGetters } from "vuex";
import typeActions from "../../../store/typeActions.js";


/**
 * ** GLOSSARY **
 * 
 * VESTING ROUND
 * Set of vesting periods generated upon each IBCO buy
 * 
 * VESTING PERIOD
 * Single vesting schedule caracterized by a Date and Amount to be released/withdrawn
 * 
 * ROUND RATIO
 * Percentage of the total amount to be vested in a Vesting Round
 * 
 * ROUND MULTIPLE
 * number of schedule periods in each round (2 for "genesis investors", 3 for the others)
 * 
 */


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

      currentVestingRound: 1,
      isGenesisInvestor: false
    }
  },
  components: {
    VestingTable
  },
  computed: {
    ...mapGetters("vesting", [
      "vestingSchedulesCount",
      "vestingSchedulesInfo"
    ]),
    ...mapGetters("global", [
      "web3"
    ]),
    roundMultiple() {
      return this.isGenesisInvestor ? 2 : 3;
    },
    /**
     * Computes the total number of vesting rounds
     */
    vestingRoundsCount() {
      if (this.vestingSchedulesCount) {
        return this.vestingSchedulesCount / this.roundMultiple;
      } else {
        return 0;
      }
    },
    /**
     * Determines if all information about all vesting schedules was already fetched or not
     */
    isVestingInfoCalled() {
      if (this.vestingSchedulesCount > 0) {
        return (this.vestingSchedulesInfo).length == this.vestingSchedulesCount ? true : false;
      } else {
        return false;
      }
    },
    /**
     * Determines if the connected wallet has any vesting schedule (past or ongoing)
     */
    isVestingActive() {
      return this.vestingSchedulesCount > 0 ? true : false;
    }
  },
  async mounted() {
    await this.$store.dispatch(typeActions.getVestingSchedulesCount);

    if (this.vestingSchedulesCount % 2 === 0 && this.vestingSchedulesCount % 3 !== 0) {
      this.isGenesisInvestor = true;
    }

    if (this.isVestingActive) {
      this.$store.dispatch(typeActions.getAllVestingSchedules, { count: this.vestingSchedulesCount });
    }
  },
}
</script>
<style scoped>
.drop-down-menu-custom {
  overflow-y: auto;
  height: 15rem;
}
</style>