<!-- 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>

      {{ sharingExplanation }}
      <input
        v-model="givenName"
        type="text"
        placeholder="Name"
        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
      />

      <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, Prop } from "vue-facing-decorator";

import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import * as databaseUtil from "../db/databaseUtil";
import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";

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

  @Prop({
    default:
      "This is not sent to servers. It is only shared with people when you send it to them.",
  })
  sharingExplanation!: string;
  @Prop({ default: false }) callbackOnCancel!: boolean;

  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;
    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
    if (USE_DEXIE_DB) {
      settings = await retrieveSettingsForActiveAccount();
    }
    this.givenName = settings.firstName || "";
    this.visible = true;
  }

  async onClickSaveChanges() {
    const platformService = PlatformServiceFactory.getInstance();
    await platformService.dbExec(
      "UPDATE settings SET firstName = ? WHERE id = ?",
      [this.givenName, MASTER_SETTINGS_KEY],
    );
    if (USE_DEXIE_DB) {
      await db.settings.update(MASTER_SETTINGS_KEY, {
        firstName: this.givenName,
      });
    }
    this.visible = false;
    this.callback(this.givenName);
  }

  onClickCancel() {
    this.visible = false;
    if (this.callbackOnCancel) {
      this.callback();
    }
  }
}
</script>

<style>
.dialog-overlay {
  z-index: 50;
  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>
