<template>
  <a
    :href="urlResolver()"
    @click.prevent="goToRouteName()"
    class="d-md-flex justify-content-sm-center align-items-center"
  >
    <h2 class="counter-number mb-2 mb-md-0">
      <span>{{ displayValue }}</span>
    </h2>
    <div class="d-flex flex-column align-items-center align-items-lg-start">
      <p class="counter-text">{{ counter.title }}</p>
      <p class="counter-date">از تاریخ: {{ counter.date }}</p>
    </div>
  </a>
</template>

<script>

export default {
  props: ["counter"],
  data() {
    return {
      displayValue: 0,
      interval: null,
    };
  },
  mounted() {
    this.startCount();
  },
  beforeUnmount() {
    if (this.interval) clearInterval(this.interval);
  },
  methods: {
    startCount() {
      const from = 0;
      const to = this.counter.total;
      const speed = 7000;
      const refreshInterval = 50;
      const decimals = 0;

      const loops = Math.ceil(speed / refreshInterval);
      const increment = (to - from) / loops;

      let value = from;
      let loopCount = 0;

      this.interval = setInterval(() => {
        value += increment;
        loopCount++;
        this.displayValue = value.toFixed(decimals);

        if (loopCount >= loops) {
          clearInterval(this.interval);
          this.displayValue = to.toFixed(decimals);
        }
      }, refreshInterval);
    },

    goToRouteName() {
      this.$router.push({
        name: "search",
        query: {
          q: undefined,
          key: this.counter.routeName,
        },
      });
    },

    urlResolver() {


      const routeData = this.$router.resolve({
        name: "search",
        query: {
          q: undefined,
          key: this.counter.routeName,
        },
      });
      return routeData.href;
    },
  },
};
</script>

<style lang="scss" scoped>
.counter-container {
  // padding: 0.3em;
  // display: flex;
  // align-items: center;
  // border-radius: 1em;

  // &:hover {
  //   background-color: rgba(255, 255, 255, 0.3);
  // }
}
.counter-number {
  // font-family: sahel-semi-bold;
  // font-size: 3rem;
  // color: #fff;
  // direction: ltr;
  // margin: 0;

  // font-family: var(--font-family);
  min-width: 3.2em;
  // font-size: 3635px;
  font-size: 2.57rem;
  font-weight: 700;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  color: var(--dashboard-text-primary);
  margin-bottom: 0;
  margin-left: 0.5em;
}
.counter-text {
  // font-family: var(--font-family);
  // font-size: 16px;
  font-size: 1.14rem;
  font-weight: 700;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  color: var(--dashboard-text-primary);
  margin: 0;
  white-space: nowrap;

  // font-family: sahel-light;
  // font-size: 1.2rem;
  // color: #fff;
}
.counter-date {
  // font-family: var(--font-family);
  // font-size: 16px;
  font-size: 1.14rem;
  font-weight: 400;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  text-align: center;
  color: var(--dashboard-text-primary);
  margin: 0;
  white-space: nowrap;
}
</style>
