<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Back -->
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>

      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Your Identity
      </h1>
    </div>

    <div class="flex justify-center py-12">
      <div />
      <div v-if="loading">
        <span class="text-xl">Creating...&nbsp;</span>
        <font-awesome
          icon="spinner"
          class="fa-spin fa-spin-pulse"
          color="green"
          size="128"
        ></font-awesome>
      </div>
      <div v-else-if="hitError">
        <span class="text-xl">Error Creating Identity</span>
        <font-awesome
          icon="exclamation-triangle"
          class="fa-fw text-red-500 ml-2"
        ></font-awesome>
        <p class="text-sm text-gray-500">
          Try fully restarting the app. If that doesn't work, back up all data
          (identities and other data) and reinstall the app.
        </p>
      </div>
      <div v-else>
        <span class="text-xl">Created!</span>
        <font-awesome
          icon="burst"
          class="fa-beat px-12"
          color="green"
          style="
            --fa-animation-duration: 1s;
            --fa-animation-direction: reverse;
            --fa-animation-iteration-count: 1;
            --fa-beat-scale: 6;
          "
        ></font-awesome>
      </div>
      <div />
    </div>
  </section>
</template>

<script lang="ts">
import "dexie-export-import";
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";

import { generateSaveAndActivateIdentity } from "../libs/util";
import QuickNav from "../components/QuickNav.vue";
import { logger } from "../utils/logger";

@Component({ components: { QuickNav } })
export default class NewIdentifierView extends Vue {
  loading = true;
  hitError = false;
  $router!: Router;

  async mounted() {
    this.loading = true;
    this.hitError = false;
    generateSaveAndActivateIdentity()
      .then(() => {
        this.loading = false;
        setTimeout(() => {
          this.$router.push({ name: "home" });
        }, 1000);
      })
      .catch((error) => {
        this.loading = false;
        this.hitError = true;
        logger.error("Failed to generate identity:", error);
      });
  }
}
</script>
