<template>
  <div>
    <div>
      <br />
      <div class="filter-buttons">
        <el-button-group>
          <el-button
            type="success"
            v-for="band in filterBands"
            :key="band"
            @click="filterTable(band)"
          >
            {{ band }}
          </el-button>
          <el-button type="success" @click="clearFilter" v-if="showClear"
            >Clear</el-button
          >
        </el-button-group>
      </div>
    </div>

    <div id="cards" v-if="loadCards">
      <span v-for="secret in filteredSecretsList" :key="secret.id">
        <SecretCard
          :issuer="secret.issuer"
          :username="secret.username"
          :secret="secret.secret"
          :id="secret.id"
          @edit="editSecret"
        />
      </span>
    </div>
  </div>
</template>

<script>
import { TOTP } from "totp-generator";

import SecretCard from "./SecretCard.vue";

export default {
  components: { SecretCard },
  data() {
    return {
      message: "Hello List Secret",
      apiBaseUrl: "http://localhost:8000",
      secretsList: [],
      filteredSecretsList: [],
      filterBands: ["A-C", "D-I", "J-O", "P-S", "T-Z"],
      filterBandsVals: {
        "A-C": ["A", "B", "C"],
        "D-I": ["D", "E", "F", "G", "H", "I"],
        "J-O": ["J", "K", "L", "M", "N", "O"],
        "P-S": ["P", "Q", "R", "S"],
        "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
      },
      currentFilter: [],
      loadCards: false,
      showClear: false,
    };
  },

  methods: {
    async listSecrets() {
      const url = `${this.apiBaseUrl}/secret`;
      const token = sessionStorage.getItem("token");
      const requestOptions = {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      };
      console.log(requestOptions);
      const response = await fetch(url, requestOptions)
        .then((response) => response.json())
        .then((data) => {
          // console.log(data);
          return data;
        })
        .catch((err) => console.log(err));

      response.forEach((element) => {
        // console.log(element);
        const row = this.parseSecret(element.data);
        row["id"] = element["id"];
        this.secretsList.push(row);
      });
      this.filteredSecretsList = this.secretsList;
      this.loadCards = true;
    },

    parseSecret(gibberish) {
      const jsonString = atob(gibberish);
      const secret = JSON.parse(jsonString);
      return secret;
    },

    generateTotp(secret) {
      const { otp, expires } = TOTP.generate(secret);
      console.log(expires);
      return otp;
    },

    editSecret(id) {
      console.log(id);
    },

    filterTable(band) {
      const letters = this.filterBandsVals[band];
      this.currentFilter = letters;
      this.showClear = true;
    },

    checkFirstLetter(row) {
      const firstLetter = row.issuer[0].toUpperCase();
      const index = this.currentFilter.indexOf(firstLetter);
      if (index >= 0) {
        return true;
      }
      return false;
    },

    clearFilter() {
      this.filteredSecretsList = this.secretsList;
      this.showClear = false;
    },
  },

  computed: {},

  watch: {
    currentFilter: function () {
      const filteredList = this.secretsList.filter(this.checkFirstLetter);
      this.filteredSecretsList = filteredList;
    },
  },

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

<style>
#cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 90vw;
}

.filter-buttons {
  width: 90%;
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}
</style>
