/* EntitySummaryButton.vue - Displays selected entity with edit capability */
<template>
  <button :class="containerClasses" @click="handleClick">
    <!-- Entity Icon/Avatar -->
    <div>
      <template v-if="entityType === 'project'">
        <ProjectIcon
          v-if="entity && 'handleId' in entity && entity.handleId"
          :entity-id="entity.handleId"
          :icon-size="32"
          :image-url="'image' in entity ? entity.image : ''"
          class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
        />
      </template>
      <template v-else>
        <EntityIcon
          v-if="entity?.did"
          :entity-id="entity.did"
          :contact="isContactEntity ? entity : undefined"
          class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
        />
        <font-awesome
          v-else
          icon="circle-question"
          class="text-slate-400 text-3xl"
        />
      </template>
    </div>

    <!-- Entity Information -->
    <div class="text-start min-w-0">
      <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
        {{ label }}
      </p>
      <h3 :class="nameClasses">
        {{ displayName }}
      </h3>
    </div>

    <!-- Edit Icon -->
    <p class="ms-auto text-sm pe-1 text-blue-500">
      <font-awesome icon="pen" title="Change" />
    </p>
  </button>
</template>

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

/**
 * Entity interface for both person and project entities
 */
interface EntityData {
  did?: string;
  handleId?: string;
  name?: string;
  image?: string;
}

/**
 * EntitySummaryButton - Displays selected entity with edit capability
 *
 * Features:
 * - Shows entity avatar (person or project)
 * - Displays entity name and role label
 * - Always editable - click to change entity
 * - Function props for parent control over edit behavior
 * - Supports both person and project entity types
 * - Template streamlined with computed CSS properties
 */
@Component({
  components: {
    EntityIcon,
    ProjectIcon,
  },
})
export default class EntitySummaryButton extends Vue {
  /** Entity data to display */
  @Prop({ required: true })
  entity!: EntityData | Contact | null;

  /** Type of entity: 'person' or 'project' */
  @Prop({ required: true })
  entityType!: "person" | "project";

  /** Display label for the entity role */
  @Prop({ required: true })
  label!: string;

  /**
   * Function prop for handling edit requests
   * Called when the button is clicked, allowing parent to control edit behavior
   */
  @Prop({ type: Function, default: () => {} })
  onEditRequested!: (data: {
    entityType: string;
    entity: EntityData | Contact | null;
  }) => void | Promise<void>;

  /**
   * CSS classes for the main container
   */
  get containerClasses(): string {
    return "flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2";
  }

  /**
   * Whether the entity is a Contact object
   */
  get isContactEntity(): boolean {
    return this.entity !== null && "profileImageUrl" in this.entity;
  }

  /**
   * Computed CSS classes for the entity name
   */
  get nameClasses(): string {
    const baseClasses = "font-semibold truncate";

    // Add italic styling for special "Unnamed" or entities without set names
    if (!this.entity?.name || this.entity?.did === "") {
      return `${baseClasses} italic text-slate-500`;
    }

    return baseClasses;
  }

  /**
   * Computed display name for the entity
   */
  get displayName(): string {
    // If the entity has a set name, use that name
    if (this.entity?.name) {
      return this.entity.name;
    }

    // If the entity is the special "Unnamed", use "Unnamed"
    if (this.entity?.did === "") {
      return UNNAMED_ENTITY_NAME;
    }

    // If the entity does not have a set name, but is not the special "Unnamed", use their DID
    return this.entity?.did;
  }

  /**
   * Handle click event - call function prop to allow parent to control edit behavior
   */
  handleClick(): void {
    this.onEditRequested({
      entityType: this.entityType,
      entity: this.entity,
    });
  }
}
</script>

<style scoped>
/* Ensure button styling is consistent */
button {
  cursor: pointer;
}

button:hover {
  background-color: #f1f5f9; /* hover:bg-slate-100 */
}
</style>
