/** * PersonCard.vue - Individual person display component * * Extracted from
GiftedDialog.vue to handle person entity display * with selection states and
conflict detection. * * @author Matthew Raymer */
<template>
  <li :class="cardClasses" @click="handleClick">
    <div class="relative w-fit mx-auto">
      <EntityIcon
        v-if="person.did"
        :contact="person"
        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
      />
      <font-awesome
        v-else
        icon="circle-question"
        class="text-slate-400 text-5xl mb-1"
      />

      <!-- Time icon overlay for contacts -->
      <div
        v-if="person.did && showTimeIcon"
        class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
      >
        <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
      </div>
    </div>

    <h3 :class="nameClasses">
      {{ person.name || person.did || "Unnamed" }}
    </h3>
  </li>
</template>

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

/**
 * PersonCard - Individual person display with selection capability
 *
 * Features:
 * - Person avatar using EntityIcon
 * - Selection states (selectable, conflicted, disabled)
 * - Time icon overlay for contacts
 * - Click event handling
 * - Emits click events for parent handling
 */
@Component({
  components: {
    EntityIcon,
  },
})
export default class PersonCard extends Vue {
  /** Contact data to display */
  @Prop({ required: true })
  person!: Contact;

  /** Whether this person can be selected */
  @Prop({ default: true })
  selectable!: boolean;

  /** Whether this person would create a conflict if selected */
  @Prop({ default: false })
  conflicted!: boolean;

  /** Whether to show time icon overlay */
  @Prop({ default: false })
  showTimeIcon!: boolean;

  /**
   * Computed CSS classes for the card
   */
  get cardClasses(): string {
    if (!this.selectable || this.conflicted) {
      return "opacity-50 cursor-not-allowed";
    }
    return "cursor-pointer hover:bg-slate-50";
  }

  /**
   * Computed CSS classes for the person name
   */
  get nameClasses(): string {
    const baseClasses =
      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";

    if (this.conflicted) {
      return `${baseClasses} text-slate-400`;
    }

    return baseClasses;
  }

  /**
   * Handle card click - only emit if selectable and not conflicted
   */
  handleClick(): void {
    if (this.selectable && !this.conflicted) {
      this.emitPersonSelected(this.person);
    }
  }

  // Emit methods using @Emit decorator

  @Emit("person-selected")
  emitPersonSelected(person: Contact): Contact {
    return person;
  }
}
</script>

<style scoped>
/* Component-specific styles if needed */
</style>