<template>
  <tbody>
    <tr v-for="pp in currentPageProposals.length" :key="pp">
      <td>{{ currentPageProposals[pp-1]?.title }}</td>
      <td><button class="btn btn-meta-1" @click="targetGovernanceDetails(pp-1)">{{
        $t(i18nConst.governanceProposalItemDetails) }}</button></td>
      <td>
        <div class="badge rounded-pill bg-primary badge-text float-end" :class="statusClass(pp-1)">
          <span>{{ currentPageProposals[pp-1]?.state}}</span>
        </div>
      </td>
      <td class="text-center">
        <span v-if="currentPageProposals[pp-1]?.state === 'active'">{{ days(pp-1) }}</span>
        <span v-else> - </span>
      </td>
    </tr>
  </tbody>
</template>

<script>
import dayjs from 'dayjs';
import i18nConstantes from "@/constantes/i18n.constantes.js";

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
    };
  },
  props: {
    proposals: Array,
    proposalsPerPage: Number,
    page: Number,
    filter: String,
    filterOptions: Object,
  },
  computed: {
    currentPageFirstIndex() {
      return this.page * this.proposalsPerPage - this.proposalsPerPage;
    },
    currentPageProposals() {
      let proposals = [];
      for (let i = 0; i < this.proposalsPerPage; i++) {
        if (this.proposals[this.currentPageFirstIndex + i]) {
          proposals[i] = this.proposals[this.currentPageFirstIndex + i]
        }
      }
      return proposals;
    },
  },
  methods: {
    targetGovernanceDetails(currentPagePropIndex) {
      this.$router.push({ name: "GovernanceDetails", params: { id: this.proposals[this.currentPageFirstIndex + currentPagePropIndex].id } })
    },
    statusClass(currentPagePropIndex) {
      let className;
      switch (this.proposals[this.currentPageFirstIndex + currentPagePropIndex].state) {
        case 'active':
          className = 'bg-success';
          break;
        case 'closed':
          className = 'bg-danger';
          break;
      }
      return className;
    },
    days(currentPagePropIndex) {
      let now = dayjs();
      let dateEnd = dayjs.unix(this.proposals[this.currentPageFirstIndex + currentPagePropIndex].end);
      let diffDay = dateEnd.diff(now, 'day');

      if (diffDay !== 0) {
        let diffDay = dateEnd.diff(now, 'day');
        return diffDay + " day(s) remaining.";
      }

      let diffHour = dateEnd.diff(now, 'hour');
      if (diffHour !== 0) {
        return diffHour + " hour(s) remaining.";
      }

      let diffMinute = dateEnd.diff(now, 'minute');
      return diffMinute + " minute(s) remaining.";
    }
  }
};
</script>

<style scoped>
.text-align-end {
  text-align: end;
}

.proposal-box {
  border: 2px solid var(--blue-custom);
  border-radius: 0.5rem;
}

.proposal-item-hr {
  background-color: var(--blue-custom);
  height: 2px;
  border: 0;
  border-color: var(--blue-custom);
}

.badge-text {
  text-align: center;
}
</style>
<style scoped>
table td{
  padding: 1rem;
}
</style>
