<template>
  <v-container>
    <v-row class="d-flex justify-space-beetween">
      <v-col cols="12">
        <v-form>
          <v-text-field
            background-color="white"
            append-icon="mdi-magnify"
            label="Search by Address / Txn Hash / Block"
            outlined
            clearable
          ></v-text-field>
        </v-form>
      </v-col>
    </v-row>
    <v-row class="d-flex justify-space-beetween">
      <v-col cols="12" sm="6" lg="4">
        <info-card
          icon="mdi-cube-scan"
          title="Block Height"
          :sub-title="latestBlock"
          color="blue"
        >
        </info-card>
      </v-col>
      <v-col cols="12" sm="6" lg="4">
        <info-card
          icon="mdi-pickaxe"
          title="Active Validators"
          :sub-title="12"
          color="red"
        >
        </info-card>
      </v-col>
      <v-col cols="12" sm="6" lg="4">
        <info-card
          icon="mdi-wallet"
          title="Wallet Addresses"
          :sub-title="25466"
          color="green"
        >
        </info-card>
      </v-col>
    </v-row>
    <v-row class="d-flex justify-space-between">
      <v-col cols="12" lg="7">
        <v-data-table
          calculate-widths
          :headers="blocksTable"
          :items="latestBlocks"
        >
          <template v-slot:item="{ item }">
            <tr>
              <td>{{ item.height }}</td>
              <td class="truncate">{{ item.hash }}</td>
              <td class="truncate">{{ item.miner }}</td>
            </tr>
          </template></v-data-table
        >
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  mounted() {
    let nuxtCtx = this
    if (process.client) {
      const wsConnection = new WebSocket('wss://ws.rpc.grassecon.net')

      wsConnection.onmessage = function (event) {
        const blockData = JSON.parse(event.data)
        if (blockData?.params) {
          nuxtCtx.queueBlock({
            height: blockData.params.result.number,
            hash: blockData.params.result.hash,
            miner: blockData.params.result.author,
          })
        }
      }

      wsConnection.onopen = function (event) {
        this.send(
          JSON.stringify({
            method: 'eth_subscribe',
            params: ['newHeads'],
            id: 1,
            jsonrpc: '2.0',
          })
        )
      }
    }
  },
  data() {
    return {
      latestBlock: '0x1',
      blocksTable: [
        {
          text: 'Height',
          value: 'height',
        },
        {
          text: 'Hash',
          value: 'hash',
        },
        {
          text: 'Miner',
          value: 'miner',
        },
      ],
      latestBlocks: [],
    }
  },
  methods: {
    queueBlock(opts) {
      this.latestBlocks.push(opts)
      this.latestBlock = opts.height
    },
  },
}
</script>
}

<style>
.container {
  max-width: 1250px;
}

.truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
