<template>
  <v-footer color="blue lighten-2" app>
    <one-clock class="hidden-sm-and-down"></one-clock>
    <v-spacer></v-spacer>
    <span class="one-footer white--text">
      <code class="mb-0">Auto logged out in <span>{{ secondsUntilExpire }}</span> seconds</code>
    </span>
  </v-footer>
</template>

<style>
span.one-footer {
  margin-right: 30px;
}
</style>

<script>
module.exports = {
  data() {
    return {
      IDLE_TIMEOUT: 5 * 60, // Waktu idle dalam detik
      autologoutCounter: 0, // Counter idle dalam localStorage
      _idleSecondsTimer: null,
    };
  },

  computed: {
    secondsUntilExpire() {
      return this.IDLE_TIMEOUT - this.autologoutCounter;
    }
  },

  mounted() {
    // Mengambil waktu logout yang disesuaikan jika tersedia
    if (localStorage.getItem("user")) {
      var retrievedObject = localStorage.getItem("user");
      var dtuser = JSON.parse(retrievedObject);
      if (dtuser.time_autologout && parseInt(dtuser.time_autologout) > 0) {
        this.IDLE_TIMEOUT = parseInt(dtuser.time_autologout) * 60;
      }
    }

    // Inisialisasi autologout di localStorage jika belum ada
    if (localStorage.getItem("autologout") === null) {
      localStorage.setItem("autologout", 0);
    }
    localStorage.removeItem("logoutTriggered");

    // Event listeners untuk reset idle timer saat ada aktivitas pengguna
    document.onclick = this.resetIdleTimer;
    document.onmousemove = this.resetIdleTimer;
    document.onkeypress = this.resetIdleTimer;

    // Mulai interval untuk memeriksa idle time dan update counter
    this._idleSecondsTimer = setInterval(this.checkIdleTime, 1000);

    // Event listener untuk perubahan `localStorage` guna sinkronkan logout antar tab
    window.addEventListener("storage", this.handleStorageChange);
  },

  methods: {
    resetIdleTimer() {
      localStorage.setItem("autologout", 0);
      this.autologoutCounter = 0; // Reset counter di data reaktif
    },

    checkIdleTime() {
      let xcounter = parseInt(localStorage.getItem("autologout"));
      xcounter++;
      localStorage.setItem("autologout", xcounter);
      this.autologoutCounter = xcounter; // Update counter di data reaktif

      // Jika waktu idle telah habis, logout semua tab
      if (xcounter >= this.IDLE_TIMEOUT) {
        clearInterval(this._idleSecondsTimer);
        localStorage.setItem("logoutTriggered", true); // Set trigger logout
        localStorage.removeItem("autologout"); // Hapus autologout
        window.one_logout('/one-ui/test/vuex/one-login-v2') // Arahkan ke login
      }
    },

    handleStorageChange(event) {
      if (event.key === "logoutTriggered" && event.newValue === "true") {
        // Redirect semua tab ke halaman login jika logoutTriggered berubah
        window.one_logout('/one-ui/test/vuex/one-login-v2')
      }
    }
  },

  beforeDestroy() {
    clearInterval(this._idleSecondsTimer);
    window.removeEventListener("storage", this.handleStorageChange);
  },

  components: {
    'one-clock': httpVueLoader('./oneTanggal.vue')
  }
}
</script>
