<template>
  <div class="inspect">
    <h2>
      <Address
        v-if="!fileNames"
        :address="address"
        :resolve="false"
      />
      <template v-else>
        <hash-badge :address="address" class="hash-badge" />
        <a :href="`/api/raw/${address}`">
          {{ fileNames.join(", ") }}
        </a>
      </template>
    </h2>
    <div v-if="!error">
      <div class="preview" v-if="mimeType">
        <template v-if="mimeType.startsWith('audio')">
          <audio controls :src="`/api/raw/${address}`" />
        </template>
        <template v-if="mimeType.startsWith('image')">
          <a :href="`/api/raw/${address}`">
            <img :src="`/api/raw/${address}`" />
          </a>
        </template>
      </div>
      <template v-if="attributes.length">
        <h3>Own attributes ({{ attributes.length }})</h3>
        <table>
          <tr>
            <th>Attribute name</th>
            <th>Value</th>
          </tr>
          <tr v-for="[id, entry] in attributes" :key="id">
            <td>{{ entry.attribute }}</td>
            <td>
              <Address
                link
                v-if="entry.value.t === 'Address'"
                :address="entry.value.c"
              />
              <template v-else>
                {{ entry.value.c }}
              </template>
            </td>
          </tr>
        </table>
      </template>
      <template v-if="backlinks.length">
        <h3>Referred to ({{ backlinks.length }})</h3>
        <table>
          <tr>
            <th>Entities</th>
            <th>Attribute names</th>
          </tr>
          <tr v-for="[id, entry] in backlinks" :key="id">
            <td>
              <Address link :address="entry.entity" />
            </td>
            <td>
              {{ entry.attribute }}
            </td>
          </tr>
        </table>
      </template>
    </div>
    <div v-else class="error">
      {{ error }}
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import Address from "@/components/Address.vue";
import { useEntity } from "@/lib/entity";
import HashBadge from "@/components/HashBadge.vue";

export default defineComponent({
  name: "File",
  components: {
    Address,
    HashBadge,
  },
  props: {
    address: {
      type: String,
      required: true,
    },
  },
  data: () => {
    return {
      newEntryAttribute: "",
      newEntryValue: "",
    };
  },
  computed: {
    mimeType(): string | undefined {
      return this.attributes.find(([_, e]) => e.attribute === "FILE_MIME")?.[1]
        .value.c;
    },
  },
  setup(props) {
    const { attributes, backlinks, error } = useEntity(props.address);

    const fileNames = computed(() => {
      const extantAddresses = backlinks.value
        .filter(([_, e]) => e.attribute == "FILE_IS")
        .map(([_, e]) => e.entity);

      const result = new Set();
      extantAddresses.forEach((address) => {
        const { attributes } = useEntity(address);
        result.add(
          attributes.value.find(([_, e]) => e.attribute == "FILE_NAME")?.[1]
            .value.c
        );
      });
      return Array.from(result);
    });

    return {
      attributes,
      backlinks,
      fileNames,
      error,
    };
  },
});
</script>

<style scoped lang="scss">
h2 a {
  text-decoration: none;
}

.preview {
  img {
    max-height: 256px;
  }
}

.hash-badge {
  margin-right: 0.5em;
}

.error {
  color: red;
}
</style>
