<!-- similar to ContactNameDialog -->
<template>
  <div v-if="visible" class="dialog-overlay">
    <div v-if="page === OnboardPage.Home" class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">
        Welcome to Time Safari
        <br />
        Showcasing Gratitude & Magnifing Time
      </h1>

      <p v-if="isRegistered" class="mt-4">
        You can now log things that you've received or witnessed:
        <span v-if="numContacts > 0">
          click on {{ firstContactName }}'s name or
        </span>
        click on "Unnamed" to express your appreciation for... whatever -- like
        thanks for showing you all these fascinating stories of
        <em>gratitude</em>.
      </p>
      <p v-else class="mt-4">
        The feed underneath this pop-up shows the latest gifts recognized by
        others. Once someone registers you, you'll be able to log your
        appreciation, too.
      </p>

      <p class="mt-4 flex items-center">
        The more you illuminate cool things people are doing, the more you
        attract people to work together with you.
      </p>

      <p class="mt-4 flex items-center">
        The
        <fa
          icon="house-chimney"
          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
        />
        button below brings you back to this feed screen.
      </p>

      <div class="mt-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="onClickClose(true)"
          >
            That's enough help, thanks.
          </button>
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="$router.push({ name: 'discover' })"
          >
            Show me more!
          </button>
        </div>
      </div>

      <p class="mt-4 flex items-center">
        To see these instructions and more, click above on
        <span
          class="ml-1 mr-1 text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
        >
          Help
        </span>
      </p>
    </div>

    <div v-if="page === OnboardPage.Discover" class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">
        Find Interesting Events & Projects
      </h1>

      <p>
        It turns out that people in groups have more to be grateful for and get
        more accomplished, so here you'll find others who are doing interesting
        things. Some may be in your neighborhood. Search for a topic, or search
        around your location under "Nearby".
      </p>

      <p class="mt-4 flex items-center">
        The
        <fa
          icon="magnifying-glass"
          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
        />
        button below brings you to this discovery screen.
      </p>

      <div class="mt-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="onClickClose(true)"
          >
            No more help needed.
          </button>
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="$router.push({ name: 'projects' })"
          >
            Show me even more.
          </button>
        </div>
      </div>
    </div>

    <div v-if="page === OnboardPage.Create" class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">
        Fish for Others with Projects of Your Own
      </h1>

      <p>
        Now you can take a turn: throw out projects of your own... anything
        you'd like to see happen. If your first idea doesn't attract any fish,
        try, try again... and let others know that this is a good place to find
        help.
      </p>

      <p class="mt-4 flex items-center">
        The
        <fa
          icon="hand"
          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
        />
        button below brings you here to your ideas.
      </p>

      <div class="mt-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="onClickClose()"
          >
            Let's go!
          </button>
          <button
            type="button"
            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="$router.push({ name: 'help' })"
          >
            Take me to more Help.
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

import { NotificationIface } from "@/constants/app";
import {db, retrieveSettingsForActiveAccount, updateAccountSettings} from "@/db/index";
import { OnboardPage } from "@/libs/util";

@Component({
  computed: {
    OnboardPage() {
      return OnboardPage;
    },
  },
  components: { OnboardPage },
})
export default class OnboardingDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  activeDid = "";
  firstContactName = null;
  givenName = "";
  isRegistered = false;
  numContacts = 0;
  page = OnboardPage.Home;
  visible = false;

  async open(page: OnboardPage) {
    this.page = page;
    const settings = await retrieveSettingsForActiveAccount();
    this.activeDid = settings.activeDid || "";
    this.isRegistered = !!settings.isRegistered;
    const contacts = await db.contacts.toArray();
    this.numContacts = contacts.length;
    if (this.numContacts > 0) {
      this.firstContactName = contacts[0].name;
    }
    this.visible = true;
    if (this.page === OnboardPage.Create) {
      // we'll assume that they've been through all the other pages
      await updateAccountSettings(this.activeDid, {
        finishedOnboarding: true,
      });
    }
  }

  async onClickClose(done?: boolean) {
    this.visible = false;
    if (done) {
      await updateAccountSettings(this.activeDid, {
        finishedOnboarding: true,
      });
    }
  }
}
</script>

<style>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 500px;
}
</style>
