<script lang="ts">
  import { identify, useEntity } from "../lib/entity";

  import HashBadge from "./HashBadge.svelte";

  import Marquee from "./Marquee.svelte";
  import UpLink from "./UpLink.svelte";

  export let address: string;
  export let link = false;
  export let isFile = false;
  export let resolve = true;

  // Identification
  let inferredIds = [];
  const { attributes, backlinks } = useEntity(address, () => resolve);
  $: {
    if (resolve) {
      identify($attributes, $backlinks).then((inferredEntries) => {
        inferredIds = inferredEntries.map((eid) => eid.value);
      });
    }
  }
</script>

<div class="address" class:identified={Boolean(inferredIds)}>
  <HashBadge {address} />
  <Marquee>
    {#if isFile}
      <UpLink to={{ entity: address }}>
        {address}
      </UpLink>
    {:else if link}
      <UpLink to={{ entity: address }}>
        {inferredIds.join(" | ") || address}
      </UpLink>
    {:else}
      {inferredIds.join(" | ") || address}
    {/if}
  </Marquee>
</div>

<style scoped lang="scss">
  .address {
    font-family: var(--monospace-font);
    display: flex;
    align-items: center;

    &,
    & a {
      line-break: anywhere;
    }

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

    .hash-badge {
      margin-right: 0.5em;
    }
  }
</style>
