<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Your Identity
      </h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </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>
