<template>
  <div class="inspect">
    <div>
      inspekt: {{ address }}
    </div>
    <div v-if="!error">
      <table>
        <tr v-for="entry in objectEntries">
          <td>
            <template v-if="entry.target !== address">
            <router-link :to="{params: {address: entry.target}}">{{ entry.target }}</router-link>
            </template>
            <template v-else>
            {{ entry.target }}
            </template>
          </td>
          <td>{{ entry.key }}</td>
          <td>
            <template v-if="entry.value[0] === 'ADDR'">
            <router-link :to="{params: {address: entry.value[1]}}">{{ entry.value[1] }}</router-link>
            </template>
            <template v-else>
            {{ entry.value }}
            </template>
          </td>
        </tr>
      </table>
    </div>
    <div v-else class="error">
      {{ error }}
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import useSWRV from "swrv";
import {fetcher} from "@/utils";
import {IEntry, ListingResult} from "@/types/base";

export default defineComponent({
  name: "Inspect",
  props: {
    "address": String
  },
  data: () => {
    return {};
  },
  computed: {
    objectEntries(): IEntry[] {
      if (this.data) {
        const entries = Object.values(this.data) as IEntry[];
        return entries.sort((a, b) => a.key.localeCompare(b.key));
      } else {
        return [];
      }
    }
  },
  setup(props) {
    const {data, error} = useSWRV<ListingResult, unknown>(() => `/api/get/${props.address}`, fetcher);

    return {
      data,
      error,
    };
  }
});
</script>
<style>
.error {
  color: red;
}
</style>
