<template>
  <div v-if="contact" class="fixed z-[100] top-0 inset-x-0 w-full">
    <div
      class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
    >
      <EntityIcon
        :contact="contact"
        :icon-size="512"
        class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
        @click="emitClose"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import EntityIcon from "./EntityIcon.vue";
import { Contact } from "../db/tables/contacts";

/**
 * LargeIdenticonModal - Large identicon display modal
 *
 * Displays a contact's identicon in a large modal overlay.
 * Clicking the identicon closes the modal.
 *
 * @author Matthew Raymer
 */
@Component({
  name: "LargeIdenticonModal",
  components: {
    EntityIcon,
  },
})
export default class LargeIdenticonModal extends Vue {
  @Prop({ required: true }) contact!: Contact | undefined;

  // Emit methods using @Emit decorator
  @Emit("close")
  emitClose() {
    // No parameters needed
  }
}
</script>
