<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import HashBadge from "./HashBadge.svelte";
  import Ellipsis from "../utils/Ellipsis.svelte";
  import { useEntity } from "../../lib/entity";
  import { Link } from "svelte-navigator";
  const dispatch = createEventDispatcher();

  export let address: string;
  export let labels: string[] = [];

  let resolving = true;

  $: ({ entity } = useEntity(address));
  $: resolving = !$entity;

  // Identification
  let inferredIds: string[] = [];
  $: inferredIds = $entity?.identify() || [];

  $: displayLabel =
    Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;

  $: dispatch("resolved", inferredIds);
</script>

<div class="upcard" class:identified={Boolean(inferredIds)}>
  <Link class="main" to="/browse/{address}">
    <div class="visual">
      <HashBadge {address} />
    </div>
    <div class="label" class:resolving title={displayLabel}>
      <h2>
        <Ellipsis value={displayLabel} />
      </h2>
      {#if $entity?.get("NOTE")}
        <p class="note">
          {$entity.get("NOTE")}
        </p>
      {/if}
    </div>
  </Link>
</div>

<style scoped lang="scss">
  .upcard {
    background: var(--background-lighter);

    border: 0.12em solid var(--foreground);
    border-radius: 0.2em;

    font-family: var(--monospace-font);
    line-break: anywhere;

    width: var(--width);
    height: var(--height);

    &.identified {
      font-family: var(--default-font);
      font-size: 0.95em;
      line-break: auto;
    }

    :global(.main) {
      text-decoration: none;
      
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      margin: .5em;
    }

    :global(.main > *){
      min-width: 0;
      max-width: 100%;
    }
  }

  .label {
    text-align: center;
    margin-top: 0.5em;

    h2 {
      font-size: unset;
      margin: 0.25em;
    }

    .note {
      margin: 0;
      font-size: 0.66em;
    }
  }

  .visual {
    display: contents;
    font-size: 3em;
  }

  .resolving {
    opacity: 0.7;
  }
</style>
