<template>
  <div>
    <div class="p-4 mb-4 border rounded-3" style="background-color: var(--grey-custom);">
      <div class="row align-items-md-stretch">
        <div class="col-md-12">
          <h4 class="fw-bold">{{ proposal.title }}
            <div :class="statusClass" class="badge rounded-pill bg-primary badge-text float-end">
              <span>{{ proposal.state }}</span>
            </div>
          </h4>
        </div>
      </div>
      <div class="row align-items-md-stretch">
        <div class="col-md-12 mt-3">
          <button class="btn btn-meta-1" @click="targetGovernanceDetails()">
            {{ $t(i18nConst.governanceProposalItemDetails) }}
          </button>
        </div>
        <div class="col-md-12 mt-3">
          <small v-if="proposal.state === 'active'" class="text-muted">{{ days }}</small>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import constantesService from '@/services/constantes.service';

import i18nConstantes from "@/constantes/i18n.constantes.js";

export default {
  props: {
    proposal: {default: {}},
  },
  data() {
    return {
      i18nConst: i18nConstantes,
    };
  },
  computed: {
    authorLink() {
      return constantesService.getConstanteNetwork("urlAddressPolygonMumbaiScan") + "address/" + this.proposal.author;
    },
    authorFormatted() {
      return this.proposal.author;
    },
    days() {
      let now = dayjs();
      let dateEnd = dayjs.unix(this.proposal.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.";
    },
    statusClass() {
      let className;
      switch (this.proposal.state) {
        case 'active':
          className = 'bg-success';
          break;
        case 'closed':
          className = 'bg-danger';
          break;
      }
      return className;
    },
    valueNow() {

      if (this.proposal && this.proposal.voteFor && this.proposal.voteFor.length > 0) {
        if (this.proposal.voteAgainst && this.proposal.voteAgainst.length > 0) {
          return Math.round(
              (this.proposal.voteFor.length /
                  (this.proposal.voteFor.length +
                      this.proposal.voteAgainst.length)) *
              100
          );
        } else {
          return 100;
        }
      } else {
        return 0;
      }

      //return 0;
    },
    valueNowStyle() {
      return "width: " + this.valueNow + "%";
    },
  },
  methods: {
    targetGovernanceDetails() {
      this.$router.push({name: "GovernanceDetails", params: {id: this.proposal.id}})
    }
  }
};
</script>

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

.badge-text {
  text-align: center;
}

</style>
