<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/noty.js"></script>

{% if request.path == '/wallet/loading' %}
<script type="text/javascript">
function check_status(){
  fetch('/wallet/status')
    .then((resp) => resp.json())
    .then(function(data) {
        // If we've created a wallet and volume, but not connected a container and are not restoring, attempt connecting
        if(data['created'] && data['volume'] && data['connected'] == false && data['initializing'] == false){
          fetch('/wallet/connect')
        }

        // If all of the above and now the wallet is connected, go to dashboard
        if(data['created'] && data['volume'] && data['connected']){
          window.setInterval(function(){
            window.location.href = "{{ url_for('wallet.dashboard') }}"
          }, 3000);
        }
    })
}

$(document).ready(function () {
  // Check wallet status every few seconds...
  window.setInterval(function(){
    check_status();
  }, 7000);

  // ...but also check on initial page load
  check_status();

  // enter teh matrix
  let q = document.getElementById('q');
  let width = q.width;
  let height = q.height;
  let yPositions = Array(300).join(0).split('');
  let ctx = q.getContext('2d');

  let draw = function () {
    ctx.fillStyle = 'rgba(0,0,0,.05)';
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = '#0F0';
    ctx.font = '10pt Georgia';
    yPositions.map(function (y, index) {
      let text = String.fromCharCode(1e2 + Math.random() * 33);
      let x = (index * 10) + 10;
      q.getContext('2d').fillText(text, x, y);
      if (y > 100 + Math.random() * 1e4) {
        yPositions[index] = 0;
      }
      else {
        yPositions[index] = y + 10;
      }
    });
  };

  let matrix_interval = null;

  function RunMatrix() {
    matrix_interval = setInterval(draw, 33);
  }

  RunMatrix();

  $('.teh_matrix span').each(function(i, obj){
      jQuery(obj).css('opacity', '1');
  });
  $('.teh_matrix img').each(function(i, obj){
      jQuery(obj).css('opacity', '1');
  });
});


</script>
{% endif %}

{% if request.path == '/wallet/dashboard' %}
<script type="text/javascript" src="/static/js/zxing.js"></script>
<script type="text/javascript">

  function decodeOnce(codeReader, selectedDeviceId) {
    codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
      const url = new URL(result.text);
      if (url.protocol == 'wownero:'){
        document.getElementById('address').value = url.pathname;
        url.searchParams.forEach((value, key) => {
          if (key == 'tx_amount'){
            document.getElementById('amount').value = value;
          };
        });
      };
      codeReader.reset();
      $('#preview').hide();
    }).catch((err) => {
      console.error(err);
      codeReader.reset();
      $('#preview').hide();
    })
  }

  window.addEventListener('load', function () {
    let selectedDeviceId;
    const codeReader = new ZXing.BrowserQRCodeReader();
    codeReader.getVideoInputDevices()
      .then((videoInputDevices) => {
        document.getElementById('startVideo').addEventListener('click', () => {
          $('#preview').show();
          decodeOnce(codeReader, videoInputDevices[0].deviceId);
        })
        document.getElementById('stopVideo').addEventListener('click', () => {
          codeReader.reset();
          $('#preview').hide();
        })
      })
      .catch((err) => {
        console.error(err)
      })
  })
</script>
{% endif %}

{% with messages = get_flashed_messages() %}
  {% if messages %}
  <script type="text/javascript">
    {% for message in messages %}
    new Noty({
      type: 'warning',
      theme: 'relax',
      layout: 'topCenter',
      text: '{{ message }}',
      timeout: 3500
    }).show();
    {% endfor %}
  </script>
  {% endif %}
{% endwith %}
