<template>
  <div class="card">
    <h4 class="card-custom-title">
      {{ $t(i18nConst.lotteryLastResultsTitle) }}
    </h4>
    <hr />
    <div class="col-md-12 fs-6 p-card">
      <p>
        {{ $t(i18nConst.lotteryLastResultsMessage) }}
        <span class="badge bg-dark fs-5">{{ roundSelected }}</span>
      </p>
      <div v-if="resultLottery" class="row">
        <div class="d-flex justify-content-between align-items-center">
          <div class="">
            {{ $t(i18nConst.lotteryWinningNumber) }}
          </div>
          <div>
            <!-- <span
              style="background-color: #85289b;"
              class="badge rounded-pill fs-4 text-white"
              >{{ resultLottery.number1 }}</span
            >&nbsp; -->
            <span
              style="background-color: #3F43CD;"
              class="badge rounded-pill fs-4 text-white"
              >{{ resultLottery.number2 }}</span
            >&nbsp;
            <span
              style="background-color: #e0e4f4;"
              class="badge rounded-pill fs-4 text-dark"
              >{{ resultLottery.number3 }}</span
            >&nbsp;
            <span
              style="background-color: #C99ED3;"
              class="badge rounded-pill fs-4 text-white"
              >{{ resultLottery.number4 }}</span
            >&nbsp;
            <span class="badge rounded-pill bg-light fs-4 text-dark">{{
              resultLottery.number5
            }}</span
            >&nbsp;
            <span class="badge rounded-pill bg-info fs-4 text-dark">{{
              resultLottery.number6
            }}</span
            >&nbsp;
            <span
              style="background-color: #f0f4fc;"
              class="badge rounded-pill fs-4 text-dark"
              >{{ resultLottery.number7 }}</span
            >
          </div>
        </div>
      </div>
      <div v-else class="col-md-12 empty-card p-card">
        <p class="empty-card-title">
          {{ $t(i18nConst.lotteryLastResultsEmptyTitle) }}
        </p>
        <p class="empty-card-description">
          <!-- {{ $t(i18nConst.lotteryLastResultsEmptyDescription) }} -->
        </p>
      </div>
      <div class="row mt-4">
        <div class="col-6">
          <button
            v-if="isClaimPossible"
            class="btn btn-meta-1"
            v-on:click.prevent="claimTickets"
          >
            Claim rewards
          </button>
        </div>
        <div class="col-6">
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-end">
              <li class="page-item">
                <a
                  class="page-link text-dark"
                  :class="disableBeforeButton"
                  aria-label="Previous"
                >
                  <span
                    aria-hidden="true"
                    v-on:click.prevent="resultLotteryHistory('prev')"
                    >&laquo;&nbsp;Previous</span
                  >
                </a>
              </li>
              <li class="page-item">
                <a
                  class="page-link text-dark"
                  :class="disableNextButton"
                  aria-label="Next"
                >
                  <span
                    aria-hidden="true"
                    v-on:click.prevent="resultLotteryHistory('next')"
                    >Next&nbsp;&raquo;</span
                  >
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
      roundSelected: 0,
    };
  },
  computed: {
    ...mapGetters("lottery", [
      "resultLottery",
      "lastRoundIndex",
      "infosLottery",
      "tickets",
      "isRewardsClaimable"
    ]),
    disableBeforeButton() {
      if (this.roundSelected <= 1 ) {
        return "disabled";
      } else {
        return "";
      }
    },
    disableNextButton() {
      if (this.roundSelected == this.lastRoundIndex) {
        //console.log("disabled");
        return "disabled";
      } else {
        return "";
      }
    },
    isClaimPossible() {
      let claimPossible = false;
      if (this.tickets && this.resultLottery && this.isRewardsClaimable) {
        claimPossible = this.resultLottery && this.tickets && this.tickets.length > 0;
        //console.log("tickets claim possible => ", this.tickets);
        //console.log("claimPossible => ", claimPossible);
        let statusTickets = false;
        for (const t of this.tickets) {
          statusTickets = statusTickets || t.status;
        }
        claimPossible = claimPossible && !statusTickets;
        //console.log("claimPossible => ", claimPossible);
      }
      return claimPossible;
    }
  },
  methods: {
    async resultLotteryHistory(direction) {
      switch (direction) {
        case "prev":
          this.roundSelected--;
          break;
        case "next":
          this.roundSelected++;
          break;
      }
      //console.log("last result lotteryId -> ", this.roundSelected);
      await this.$store.dispatch(typeActions.getMyTickets, this.roundSelected);
      await this.$store.dispatch(
        typeActions.getInfosLottery,
        this.roundSelected
      );
    },
    async claimTickets() {
      this.$store.dispatch(typeActions.claimTickets, {
        resultLottery: this.resultLottery,
        lotteryId: this.roundSelected,
        tickets: this.tickets,
        infosLottery: this.infosLottery,
      });
    },
  },
  async mounted() {
    await this.$store.dispatch(typeActions.getLastLotteryId);
    await this.$store.dispatch(typeActions.getInfosLottery);
    this.roundSelected = this.lastRoundIndex;
    //console.log("this.lastRoundINdex - ", this.lastRoundIndex);
  },
};
</script>

<style scoped>
.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

.page-link {
  cursor: pointer;
}
</style>
