<template>
  <div class="wrapper">
    <div class="card-top">
      <span class="issuer">{{ issuer }}</span>
      <button class="edit-button" @click="editSecret">
        <img src="../assets/edit-icon.png" class="edit-icon" /></button
      ><br />
    </div>

    <span class="user">{{ username }}</span> <br />
    <span class="otp">{{ generateTotp(secret) }}</span>
    <div class="timer" id="timer" :style="{ width: timerWidth + '%' }"></div>
  </div>
</template>

<script>
import { TOTP } from "totp-generator";
export default {
  props: {
    id: Number,
    issuer: String,
    username: String,
    secret: String,
  },
  data() {
    return {
      otp: 123456,
      notes: "",
      remainingTime: 0,
      timerWidth: 0,
      totalTime: 30,
    };
  },

  methods: {
    generateTotp(secret) {
      const { otp, expires } = TOTP.generate(secret);
      const remaining = (expires - Date.now()) / 30000;
      this.remainingTime = remaining / 1000;
      this.timerWidth = remaining * 100;
      // console.log("hello");
      return otp;
    },

    startTimer() {
      this.interval = setInterval(() => {
        if (this.remainingTime > 0) {
          this.timerWidth = (this.remainingTime / this.totalTime) * 10;
        } else {
          clearInterval(this.interval);
        }
      }, 100);
    },

    editSecret() {
      this.$emit("edit", this.id);
    },
  },

  mounted() {
    // this.startTimer();
  },
};
</script>

<style>
.wrapper {
  height: 110px;
  width: 160px;
  /* border: 1px solid black; */
  border-radius: 4px;
  padding: 4px 12px 4px 12px;
  box-shadow: 1px 1px 8px #ccc;
  margin: 2px;
}

.issuer {
  font-weight: 700;
}

.user {
  color: gray;
  font-size: 0.8rem;
}

.otp {
  font-size: 2rem;
}

.timer {
  /* width: 100%; */
  height: 3px;
  background-color: green;
}

.card-top {
  display: flex;
  justify-content: space-between;
}
.edit-button {
  position: relative;
  right: 0;
  margin-left: auto;
  border: none;
}

.edit-icon {
  width: 16px;
  height: 16px;
}
</style>
