/** * ProjectCard.vue - Individual project display component * * Extracted from
GiftedDialog.vue to handle project entity display * with selection states,
conflict detection, and issuer information. * * @author Matthew Raymer */
<template>
  <li :class="cardClasses" @click="handleClick">
    <ProjectIcon
      :entity-id="project.handleId"
      :icon-size="30"
      :image-url="project.image"
      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
    />

    <div class="overflow-hidden">
      <h3 :class="nameClasses">
        {{ displayName }}
      </h3>

      <div class="text-xs text-slate-500 truncate">
        <font-awesome icon="user" class="text-slate-400" />
        {{ issuerDisplayName }}
      </div>
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import ProjectIcon from "./ProjectIcon.vue";
import { PlanData } from "../interfaces/records";
import { Contact } from "../db/tables/contacts";
import { didInfo } from "../libs/endorserServer";
import { UNNAMED_PROJECT } from "@/constants/entities";
import { NotificationIface } from "../constants/app";

/**
 * ProjectCard - Displays a project entity with selection capability
 *
 * Features:
 * - Shows project icon using ProjectIcon
 * - Displays project name and issuer information
 * - Handles click events for selection
 * - Shows issuer name using didInfo utility
 * - Selection states (selectable, conflicted, disabled)
 * - Warning notifications for conflicted entities
 */
@Component({
  components: {
    ProjectIcon,
  },
})
export default class ProjectCard extends Vue {
  /** Project entity to display */
  @Prop({ required: true })
  project!: PlanData;

  /** Active user's DID for issuer display */
  @Prop({ required: true })
  activeDid!: string;

  /** All user's DIDs for issuer display */
  @Prop({ required: true })
  allMyDids!: string[];

  /** All contacts for issuer display */
  @Prop({ required: true })
  allContacts!: Contact[];

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

  /** Notification function from parent component */
  @Prop()
  notify?: (notification: NotificationIface, timeout?: number) => void;

  /** Context for conflict messages (e.g., "giver", "recipient") */
  @Prop({ default: "other party" })
  conflictContext!: string;

  /**
   * Get the unnamed project constant
   */
  get unnamedProject(): string {
    return UNNAMED_PROJECT;
  }

  /**
   * Computed CSS classes for the card
   */
  get cardClasses(): string {
    const baseCardClasses =
      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";

    if (this.conflicted) {
      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
    }

    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
  }

  /**
   * Computed CSS classes for the project name
   */
  get nameClasses(): string {
    const baseNameClasses = "text-sm font-semibold truncate";

    if (this.conflicted) {
      return `${baseNameClasses} text-slate-500`;
    }

    // Add italic styling for entities without set names
    if (!this.project.name) {
      return `${baseNameClasses} italic text-slate-500`;
    }

    return baseNameClasses;
  }

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

    // If the project does not have a set name
    return this.unnamedProject;
  }

  /**
   * Computed display name for the project issuer
   */
  get issuerDisplayName(): string {
    return didInfo(
      this.project.issuerDid,
      this.activeDid,
      this.allMyDids,
      this.allContacts,
    );
  }

  /**
   * Handle card click - emit if not conflicted, show warning if conflicted
   */
  handleClick(): void {
    if (!this.conflicted) {
      this.emitProjectSelected(this.project);
    } else if (this.notify) {
      // Show warning notification for conflicted entity
      this.notify(
        {
          group: "alert",
          type: "warning",
          title: "Cannot Select",
          text: `You cannot select "${this.displayName}" because it is already selected as the ${this.conflictContext}.`,
        },
        3000,
      );
    }
  }

  // Emit methods using @Emit decorator

  @Emit("project-selected")
  emitProjectSelected(project: PlanData): PlanData {
    return project;
  }
}
</script>

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