<!-- similar to ContactNameDialog -->
<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>

      This is not sent to servers. It is only shared with people when you send
      it to them.
      <input
        type="text"
        placeholder="Name"
        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
        v-model="givenName"
      />

      <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-lg font-bold 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-2 py-3 rounded-md mb-2"
            @click="onClickSaveChanges()"
          >
            Save
          </button>
          <button
            type="button"
            class="block w-full text-center text-md uppercase 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="onClickCancel()"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

import { NotificationIface } from "@/constants/app";
import { db, retrieveSettingsForActiveAccount } from "@/db/index";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";

@Component
export default class UserNameDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  callback: (name: string) => void = () => {};
  givenName = "";
  visible = false;

  /**
   * @param aCallback - callback function for name, which may be ""
   */
  async open(aCallback?: (name: string) => void) {
    this.callback = aCallback || this.callback;
    const settings = await retrieveSettingsForActiveAccount();
    this.givenName = settings.firstName || "";
    this.visible = true;
  }

  async onClickSaveChanges() {
    await db.settings.update(MASTER_SETTINGS_KEY, {
      firstName: this.givenName,
    });
    this.visible = false;
    this.callback(this.givenName);
  }

  onClickCancel() {
    this.visible = false;
  }
}
</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>