<template>
  <v-tooltip
    :top="tooltipTop"
    :bottom="tooltipBottom"
    :left="tooltipLeft"
    :right="tooltipRight"
    :disabled="!showTooltip"
    v-if="!noDisplay"
  >
    <template v-slot:activator="{ on }">
      <div
        v-on="on"
        v-if="minimal"
        :class="{
          'pl-4': paddingLeft,
          'pr-4': paddingRight,
        }"
      >
        <v-progress-circular
          :class="{
            centerY: centerComponent,
          }"
          :size="intervalSize"
          :width="5"
          :value="intervalValue"
          :color="intervalActive ? activeColor : inactiveColor"
          :rotate="-90"
        >
          <span
            v-if="showIntervalTime"
            :id="`${_uid}_intervalRemainingFormatted`"
          ></span>
        </v-progress-circular>
      </div>
      <div
        v-on="on"
        v-else-if="!noDisplay"
        :class="{ 'pl-4': paddingLeft, 'pr-4': paddingRight }"
      >
        <v-progress-circular
          style="top: -3px"
          :size="intervalSize"
          :width="5"
          :value="intervalValue"
          color="primary"
          :rotate="-90"
        >
          <span
            v-if="showIntervalTime"
            :id="`${_uid}_intervalRemainingFormatted`"
          ></span>
        </v-progress-circular>
        <v-switch
          v-model="intervalActive"
          :label="$t('refresh_interval')"
          style="display: inline-block"
          hide-details
          class="pr-2 pl-4"
        ></v-switch>
      </div>
    </template>

    <span>{{
      $t(
        intervalActive ? "refresh_interval_minutes" : "refresh_interval_stopped"
      ).replace("$minutes", Math.floor(intervalSeconds / 60))
    }}</span>
  </v-tooltip>
</template>

<script>
import moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";

momentDurationFormatSetup(moment);

export default {
  name: "intervalCircle",
  props: {
    intervalSeconds: {
      default: 60, // Intervalo de consulta de datos (segundos)
    },
    initOnMount: Boolean, // Controla si el intervalo se inicia en el hook mounted
    intervalSize: {
      default: 55, // Controla el tamaño del circulo
    },
    noDisplay: Boolean, // No se visualiza nada pero se refrescan los datos
    showIntervalTime: {
      default: true, // Controla si se visualiza el tiempo restante
    },
    minimal: Boolean,
    tooltipTop: Boolean,
    tooltipBottom: Boolean,
    tooltipLeft: Boolean,
    tooltipRight: Boolean,
    showTooltip: Boolean,
    paddingLeft: Boolean,
    paddingRight: Boolean,
    centerComponent: Boolean,
    activeColor: {
      default: "secondary",
    },
    inactiveColor: {
      default: "warning",
    },
  },
  data() {
    return {
      // Intervalos
      intervalID: null, // ID del intervalo de consulta
      intervalTimerID: null, // ID del intervalo del contador de tiempo
      intervalRemaining: this.intervalSeconds, // Segundos restantes para volver a consultar los datos
      intervalValue: 100, // Valor del intervalo (para el circulo que representa lo que queda para consultar los datos)
      intervalActive: true, // Flag que indica si el intervalo está activo
    };
  },
  mounted() {
    if (this.initOnMount) {
      this.initIntervals();
    }
  },
  methods: {
    /**
     * ajustar los ceros del reloj
     *
     * @param {String | Int} val
     */
    checktime(val) {
      return val < 10 ? String("0" + val) : val;
    },
    /**
     * Resets timer and data poll intervals
     */
    clearIntervals() {
      clearInterval(this.intervalID);
      clearInterval(this.intervalTimerID);

      this.intervalRemaining = this.intervalSeconds;
      this.intervalValue = 100;
    },
    /**
     * Inicia el intervalo de consulta de datos
     */
    initIntervals() {
      this.intervalID = setInterval(() => {
        this.$emit("intervalFinished");
      }, this.intervalRemaining * 1000);

      this.intervalTimerID = setInterval(() => {
        this.intervalRemaining--;
        this.intervalValue =
          (this.intervalRemaining * 100) / this.intervalSeconds;
      }, 1000);
    },
  },
  watch: {
    /**
     * Se activan/desactivan los intervalos
     */
    intervalActive() {
      if (this.intervalActive) {
        // Restablecer contador
        this.initIntervals();
      } else {
        this.clearIntervals();
      }
      this.$emit("changeStatus", this.intervalActive);
    },
    /**
     * Cambiar el contenido del tiempo restante
     */
    intervalRemaining() {
      const element = document.getElementById(
        `${this._uid}_intervalRemainingFormatted`
      );

      if (element) {
        element.textContent = moment
          .duration(this.intervalRemaining, "seconds")
          .format("HH:mm:ss");
      }
    },
  },
};
</script>

<style>
.centerY {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</style>