<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">
            <h3 class="fw-bold">{{ spaceName }} - {{ detailsProposal.title }}
              <div class="badge bg-primary badge-text float-end" :class="statusClass">
                <span>{{ detailsProposal.state }}</span>
              </div>
            </h3>
          </div>
          <div class="card-body">

            <div class="row">
              <div class="col-md-12 col-sm-12" v-if="detailsProposal.state === 'active'">
                <a class="btn btn-lg btn-outline-success float-end" :href="detailsProposalUrl" target="_blank">{{$t(i18nConst.governanceGovernanceDetailsVotingProposal)}}</a>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12">
                <span class="proposal-content">
                  {{ detailsProposal.body }}
                </span>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12 mt-3">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>{{$t(i18nConst.governanceGovernanceDetailsChoices)}}</th>
                      <th>{{$t(i18nConst.governanceGovernanceDetailsScores)}}</th>
                    </tr>
                  </thead>
                  <tbody v-if="scoreByChoice !== ''">
                    <tr v-for="e in scoreByChoice" :key="e.id">
                      <td>{{ e.label }}</td>
                      <td>{{ e.score }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
          <div class="card-footer text-muted" v-if="detailsProposal.state === 'active'">
            {{ days }}
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import { mapGetters } from "vuex";
import typeActions from "@/store/typeActions.js";
import { useRoute } from 'vue-router';
import constantes from "@/constantes/constantes.js";
import dayjs from 'dayjs';
import i18nConstantes from "@/constantes/i18n.constantes.js";

export default {
  
  components: {},
  data() {
    return {
      i18nConst: i18nConstantes
    };
  },
  computed: {
    ...mapGetters("proposals", ["detailsProposal"]),
    days() {
      let now = dayjs();
      let dateEnd = dayjs.unix(this.detailsProposal.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.detailsProposal.state) {
        case 'active':
          className = 'bg-success';
          break;
        case 'closed':
          className = 'bg-danger';
          break;
      }
      return className;
    },
    detailsProposalUrl() {
      return constantes.domainSnapshot + '/proposal/' + this.detailsProposal.id;
    },
    scoreByChoice() {
      let scoreByChoice = [];
      if(this.detailsProposal.choices && this.detailsProposal.choices.length > 0) {
        for(let i = 0; i < this.detailsProposal.choices.length; i++) {
          scoreByChoice[i] = {
            'id': i,
            'label' : this.detailsProposal.choices[i],
            'score' : this.detailsProposal.scores[i],
          }   
        }
      }
      return scoreByChoice;
    },
    spaceName() {
      if (this.detailsProposal && this.detailsProposal.space) {
        return this.detailsProposal.space.name;
      } else {
        return "";
      }
    }
  },
  methods: {

  },
  beforeCreate() {
    const route = useRoute()
    const id = route.params.id;
    this.$store.commit('proposals/proposalId', id);
    this.$store.dispatch(typeActions.initDetailsProposal);
  }
};
</script>

<style scoped>
.img-button {
  width: 25px;
}

.proposal-content {
  white-space: pre-line;
}
</style>
