<template>
  <li>
    <!-- Last viewed separator -->
    <div
      class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
      v-if="record.jwtId == lastViewedClaimId"
    >
      <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
        You've already seen all the following
      </span>
    </div>

    <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
      <div class="flex items-center gap-2 mb-6">
        <img
          src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg"
          class="size-8 object-cover rounded-full"
        />

        <div>
          <h3 class="font-semibold">
            {{
              record.giver.known ? record.giver.displayName : "Anonymous Giver"
            }}
          </h3>
          <p class="ms-auto text-xs text-slate-500 italic">
            {{ friendlyDate }}
          </p>
        </div>
      </div>

      <!-- Record Image -->
      <div
        v-if="record.image"
        class="bg-cover mb-6 -mx-3 sm:-mx-4"
        :style="`background-image: url(${record.image});`"
      >
        <a
          class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
          @click="$emit('viewImage', record.image)"
        >
          <img
            class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
            :src="record.image"
            @load="$emit('cacheImage', record.image)"
            alt="Activity image"
          />
        </a>
      </div>

      <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
        <!-- Source -->
        <div
          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
        >
          <div class="relative w-fit mx-auto">
            <template v-if="record.giver.profileImageUrl">
              <EntityIcon
                :profile-image-url="record.giver.profileImageUrl"
                :class="[
                  !record.providerPlanName
                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
                ]"
              />
            </template>
            <template v-else>
              <!-- Project Icon -->
              <template v-if="record.providerPlanName">
                <ProjectIcon
                  :entityId="record.providerPlanName"
                  :iconSize="48"
                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                />
              </template>
              <!-- Identicon for DIDs -->
              <template v-else-if="record.giver.did">
                <img
                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
                  class="rounded-full size-[3rem] sm:size-[4rem]"
                  alt="Identicon"
                />
              </template>
              <!-- Unknown Person -->
              <template v-else>
                <fa
                  icon="person-circle-question"
                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                />
              </template>
            </template>
          </div>
          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
            <fa
              :icon="record.providerPlanName ? 'building' : 'user'"
              class="fa-fw text-slate-400"
            />
            {{ record.giver.displayName }}
          </div>
        </div>

        <!-- Arrow -->
        <div
          class="absolute inset-x-28 sm:inset-x-40 mx-2 top-1/2 -translate-y-1/2"
        >
          <div class="text-sm text-center leading-none font-semibold">
            {{ fetchAmount }}
          </div>

          <div class="flex items-center">
            <hr
              class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
            />

            <div
              class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
            ></div>
          </div>
        </div>

        <!-- Destination -->
        <div
          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
        >
          <div class="relative w-fit mx-auto">
            <template v-if="record.receiver.profileImageUrl">
              <EntityIcon
                :profile-image-url="record.receiver.profileImageUrl"
                :class="[
                  !record.recipientProjectName
                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
                ]"
              />
            </template>
            <template v-else>
              <!-- Project Icon -->
              <template v-if="record.recipientProjectName">
                <ProjectIcon
                  :entityId="record.recipientProjectName"
                  :iconSize="48"
                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                />
              </template>
              <!-- Identicon for DIDs -->
              <template v-else-if="record.receiver.did">
                <img
                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
                  class="rounded-full size-[3rem] sm:size-[4rem]"
                  alt="Identicon"
                />
              </template>
              <!-- Unknown Person -->
              <template v-else>
                <fa
                  icon="person-circle-question"
                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                />
              </template>
            </template>
          </div>
          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
            <fa
              :icon="record.recipientProjectName ? 'building' : 'user'"
              class="fa-fw text-slate-400"
            />
            {{ record.receiver.displayName }}
          </div>
        </div>
      </div>

      <!-- Description -->
      <p class="font-medium">
        <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
          {{ description }}
        </a>
      </p>
      <p class="text-sm">{{ subDescription }}</p>
    </div>

    <div
      class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
    >
      <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
        <fa icon="circle-info" class="fa-fw text-slate-500" />
      </a>
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "../types";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
import { containsHiddenDid } from "../libs/endorserServer";
import ProjectIcon from "./ProjectIcon.vue";

@Component({
  components: {
    EntityIcon,
    ProjectIcon,
  },
})
export default class ActivityListItem extends Vue {
  @Prop() record!: GiveRecordWithContactInfo;
  @Prop() lastViewedClaimId?: string;
  @Prop() isRegistered!: boolean;
  @Prop() activeDid!: string;
  @Prop() confirmerIdList?: string[];

  get fetchAmount(): string {
    const claim =
      (this.record.fullClaim as unknown).claim || this.record.fullClaim;

    const amount = claim.object?.amountOfThisGood
      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
      : "";

    return amount;
  }

  private formatParticipantInfo(): string {
    const { giver, receiver } = this.record;

    // Both participants are known contacts
    if (giver.known && receiver.known) {
      return `${giver.displayName} gave to ${receiver.displayName}`;
    }

    // Only giver is known
    if (giver.known) {
      const recipient = this.record.recipientProjectName
        ? `the project "${this.record.recipientProjectName}"`
        : receiver.displayName;
      return `${giver.displayName} gave to ${recipient}`;
    }

    // Only receiver is known
    if (receiver.known) {
      const provider = this.record.providerPlanName
        ? `the project "${this.record.providerPlanName}"`
        : giver.displayName;
      return `${receiver.displayName} received from ${provider}`;
    }

    // Neither is known
    return this.formatUnknownParticipants();
  }

  private formatUnknownParticipants(): string {
    const { giver, receiver, providerPlanName, recipientProjectName } =
      this.record;

    if (providerPlanName || recipientProjectName) {
      const from = providerPlanName
        ? `the project "${providerPlanName}"`
        : giver.displayName;
      const to = recipientProjectName
        ? `the project "${recipientProjectName}"`
        : receiver.displayName;
      return `from ${from} to ${to}`;
    }

    return giver.displayName === receiver.displayName
      ? `between two who are ${giver.displayName}`
      : `from ${giver.displayName} to ${receiver.displayName}`;
  }

  get description(): string {
    const claim =
      (this.record.fullClaim as unknown).claim || this.record.fullClaim;

    if (!claim.description) {
      return "something not described";
    }

    return `${claim.description}`;
  }

  get subDescription(): string {
    const participants = this.formatParticipantInfo();

    return `${participants}`;
  }

  private displayAmount(code: string, amt: number) {
    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
  }

  private currencyShortWordForCode(unitCode: string, single: boolean) {
    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
  }

  get formattedTimestamp() {
    // Add your timestamp formatting logic here
    return this.record.timestamp;
  }

  get canConfirm(): boolean {
    if (!this.isRegistered) return false;
    if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;
    if (this.confirmerIdList?.includes(this.activeDid)) return false;
    if (this.record.issuerDid === this.activeDid) return false;
    if (containsHiddenDid(this.record.fullClaim)) return false;
    return true;
  }

  handleConfirmClick() {
    if (!this.canConfirm) {
      notifyWhyCannotConfirm(
        this.$notify,
        this.isRegistered,
        this.record.fullClaim?.["@type"],
        this.record,
        this.activeDid,
        this.confirmerIdList,
      );
      return;
    }

    this.$emit("confirmClaim", this.record);
  }

  get friendlyDate(): string {
    const date = new Date(this.record.issuedAt);
    return date.toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  }
}
</script>
