<!DOCTYPE html>
<html>

  <head>
    
    <!-- Please note that we use https://getmdl.io/components for quick and easy page 
         styling and for our client components. Look on their website to see how to use
         Material Design Lite -->
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>  
    <link rel="stylesheet" href="style.css"> 
    
    <!-- Please note how we hardcode the use of heat-sdk version, 0.3.3 in this case -->
    
    <script src="https://unpkg.com/heat-sdk@0.3.3/dist/heat-sdk.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $(document).ready(function () {
        function generateNew() {
          var sdk = new heatsdk.HeatSDK()
          sdk.api.get("/blockchain/blocks/0/100/false").then(blocks => {
            let times = [], prev = blocks[0].timestamp
            for (var i=1; i<blocks.length; i++) {
              times.push(prev - blocks[i].timestamp)
              prev = blocks[i].timestamp
            }
            console.log(times)
            let sum = times.reduce((total, num)=>total + num)
            let average = sum / times.length
            $("#average").val(average)
            $('#average').parent().addClass('is-dirty'); 
            
            let height = parseInt($("#height").val().replace(/,/g,''))
            let currentHeight = blocks[0].height
            let blocksToGo = height - currentHeight
            let timeToGo = blocksToGo * average
            let timeOfBlock = sdk.utils.timestampToDate(blocks[0].timestamp + timeToGo)
            $("#date").text(timeOfBlock)
          })
        }
        generateNew()
        $("#btn").click(generateNew)
      })
    </script>
  </head>

  <body>
    <h3>HEAT-SDK | Block height to date</h3>
    
    <h6>With heat-sdk we analyze average block times and determine when to approximately expect a block of a certain height</h6>
    
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Errupt much when?</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <form action="#">        
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="average" readonly value="Loading ..">
            <label class="mdl-textfield__label" for="average">Average block time (in seconds) ...</label>
          </div>         
          
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="height" value="777,777">
            <label class="mdl-textfield__label" for="height">Block height ...</label>
          </div>           
          
          <div>
            <small>Expected date/time of block</small>
            <div class="bigger" id="date"></div>
          </div>

        </form>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="btn">
          Refresh
        </a>
      </div>
    </div>    
    
  </body>
</html>
body {
  padding: 10px;
}
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('https://www.thelocal.it/userdata/images/article/b203eaabd74c6c0883f9e72e2144aba7de3c86ac7e3d44ce2bf1e0000b1143ca.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.bigger {
  font-size: 16px;
  margin-bottom: 8px;
}