<template>
  <div>
    <div class="row mb-4">
      <div class="col-md-12">
        <div class="card p-card">
          <h4 class="card-custom-title">
            {{ $t(i18nConst.governanceTitle) }}
          </h4>
          <hr>
          <div class="container">
            <div class="row mb-4 mt-2">
              <div class="col-12 col-md-6 p-3 rounded-3" style="background-color: var(--grey-custom);">
                <p class="px-3">
                  {{ $t(i18nConst.governanceDescription) }}
                </p>
                <div class="text-center">
                  <img src="../assets/governance_img2.png" class="img-fluid w-50 mt-3" alt="Responsive image">
                </div>
              </div>
              <div class="col-12 col-md-6 p-4">
                <img src="../assets/governance_img.png" class="img-fluid" alt="Responsive image">
                <div class="text-center mt-5">
                  <a class="btn btn-meta-1 btn-lg btn-primary" :href="createProposalUrl" target="_blank">{{
                  $t(i18nConst.governanceProposalsCreateProposal) }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mb-4">
      <div class="col-md-12">
        <div class="card p-card">
          <h4 class="card-custom-title">
            {{ $t(i18nConst.governanceProposalsList) }}
          </h4>
          <hr>
          <div class="row mt-3 mb-2">
            <div class="col-12">
              <select v-model="filterSelected" class="form-select form-select-lg mb-3" aria-label=".form-select-lg">
                <option :value="filterOptions.FILTER_ALL" selected>{{ $t(i18nConst.governanceProposalsAll) }}</option>
                <option :value="filterOptions.FILTER_ACTIVE">{{ $t(i18nConst.governanceProposalsActive) }}</option>
                <option :value="filterOptions.FILTER_PENDING">{{ $t(i18nConst.governanceProposalsPending) }}</option>
                <option :value="filterOptions.FILTER_CLOSED">{{ $t(i18nConst.governanceProposalsClosed) }}</option>
              </select>
            </div>  
          </div>
          <div v-if="filteredProposals.length > 0" class="mt-3 mb-2 overflow-hidden">
            <vue-awesome-paginate :total-items="filteredProposals.length" :items-per-page="proposalsPerPage"
              :max-pages-shown="3" :current-page="1" :on-click="onClickHandler" />
            <div class="table-responsive">
              <table class="table rounded rounded-3 table align-middle p-1"
                style="background-color: var(--grey-custom);">
                <thead>
                  <tr style="vertical-align: middle;">
                    <th scope="col">{{ $t(i18nConst.governanceProposalsTitle) }}</th>
                    <th scope="col">{{$t(i18nConst.governanceProposalItemDetails) }}</th>
                    <th scope="col">{{ $t(i18nConst.governanceProposalsState) }}</th>
                    <th scope="col" class="text-center">{{ $t(i18nConst.governanceProposalsTimeRemaining) }}</th>
                  </tr>
                </thead>
                <proposals :filterOption="filterOptions" :filter="filterSelected" :proposalsPerPage="proposalsPerPage"
                  :page="currentPage" :proposals="filteredProposals"></proposals>
              </table>
            </div>
          </div>
          <div v-else class="empty-card">
            <p class="empty-card-title">
              {{ $t(i18nConst.governanceResultsEmptyTitle) }}
            </p>
            <p class="empty-card-description">
              {{ $t(i18nConst.governanceResultsEmptyDescription) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Proposals from "../components/governance/Proposals.vue";
import i18nConstantes from "@/constantes/i18n.constantes.js";
import { mapGetters } from "vuex";
import typeActions from "@/store/typeActions.js";
import constantes from "@/constantes/constantes.js";

const filterOptions = {
  FILTER_ALL: 'all',
  FILTER_ACTIVE: 'active',
  FILTER_PENDING: 'pending',
  FILTER_CLOSED: 'closed',
}

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
      currentPage: 1,
      proposalsPerPage: 10,
      filterSelected: filterOptions.FILTER_ALL,
      filterOptions: filterOptions
    }
  },
  components: {
    Proposals,
  },
  methods: {
    onClickHandler(page) {
      this.currentPage = page;
    }
  },
  computed: {
    ...mapGetters("proposals", ["proposals"]),
    createProposalUrl() {
      return constantes.domainSnapshot;
      //return '';
    },
    filteredProposals() {
      let filteredProposals = (this.proposals).filter((p) => {
        if (this.filterSelected !== filterOptions.FILTER_ALL) {
          return p.state === this.filterSelected;
        }
        return p;
      });
      return filteredProposals;
    }
  },
  async mounted() {
    await this.$store.dispatch(typeActions.initProposals);
  },
};
</script>
<style>
.pagination-container {
  display: flex;
  column-gap: 10px;
}

.paginate-buttons {
  height: 2rem;
  width: 2rem;
  border-radius: 20px;
  cursor: pointer;
  background-color: rgb(242, 242, 242);
  border: 1px solid rgb(217, 217, 217);
  color: black;
}

.paginate-buttons:hover {
  background-color: var(--grey-custom);
}

.active-page {
  background-color: var(--grey-custom);
  border: 1px solid var(--blue-custom);
  color: var(--black-custom);
}

.active-page:hover {
  background-color: var(--blue-custom);
  color: white;
}
</style>
<style scoped>
table th {
  padding: 1rem;
}
</style>
