{% set datetime = Lona.import('datetime.datetime') %}
<html>
  <head>
    <meta charset="utf-8" />
    {{ Lona.load_stylesheets() }}
    <link href="{{ Lona.load_static_file('style.css') }}" rel="stylesheet">
  </head>
  <body>
    <div id="lona-messages"></div>

    <h1> Lona Test Project</h1>

    <table class="statistics">
      <tr>
        <th>Application Started:</th>
        <td id="application-started">{{ str(datetime.now()) }}</td>
      </tr>
      <tr>
        {# TODO: remove in 2.0 #}
        <th>Client Version:</th>
        <td>{{ Lona.client_version }}</td>
      </tr>
      {# TODO: remove in 2.0 #}
      {% if Lona.client_version == 1 %}
        <tr>
          <th>Loaded Nodes:</th>
          <td id="loaded-nodes">-</td>
        </tr>
        <tr>
          <th>Loaded Widgets:</th>
          <td id="loaded-widgets">-</td>
        </tr>
      {% endif %}
    </table>

    <br />

    <div id="lona-links">
      <a href="/">Home</a> |
      <a href="/" data-lona-ignore="True">Reload Application</a> |
      {# TODO: remove in 2.0 #}
      {% if Lona.client_version == 1 %}
        <a href="#" data-lona-ignore="True" id="enable-rendering-statistics">Enable Rendering Statistics</a>
      {% endif %}
    </div>

    <hr />

    <div id="lona"></div>

    {{ Lona.load_scripts() }}
    <script>
      window.addEventListener('load', function() {
        var disconnected = false;

        var lona_context = new Lona.LonaContext({
          target: '#lona',
          title: 'Lona',
          update_address_bar: true,
          update_title: true,
          follow_redirects: true,
          follow_http_redirects: true,
        });

        window['lona_context'] = lona_context;

        // messages -----------------------------------------------------------
        function show_message(message, color, timeout) {
          if(timeout === undefined) {
            timeout = 3000;

          };

          if(color === undefined) {
            color = 'white';

          };

          var node = document.createElement('div');
          var text_node = document.createElement('span');

          node.appendChild(text_node);

          text_node.classList.add('lona-message');
          text_node.innerHTML = message;
          text_node.style.color = color;

          document.querySelector('#lona-messages').appendChild(node);

          setTimeout(function() {
            node.remove();
          }, timeout);

        };

        lona_context.add_message_handler(function(lona_context, raw_message) {
          try {
            var message = JSON.parse(raw_message);

          } catch {
            return raw_message;

          };

          if(!message.notification) {
            return raw_message;
          };

          show_message(
            message.notification.message,
            message.notification.color,
            message.notification.timeout,
          );

        });

        // recconnecting ------------------------------------------------------
        lona_context.add_connect_hook(function(lona_context, event) {
          if(disconnected) {
            show_message('Connected', 'lime');
            disconnected = false;
          };

          lona_context.patch_input_events('#lona-links');
        });

        lona_context.add_disconnect_hook(function(lona_context, event) {
          show_message('Connection Lost', 'red');
          disconnected = true;

          setTimeout(function() {
            show_message('Trying to reconnect... ', 'red');
            lona_context.reconnect();

          }, 1000);
        });

        // timeouts -----------------------------------------------------------
        lona_context.add_view_timeout_hook(function(lona_context, lona_window) {
          lona_window.set_html('Waiting for server...');
        });

        lona_context.add_input_event_timeout_hook(function(lona_context, lona_window) {
          show_message('Waiting for server...');
        });

        {# TODO: remove in 2.0 #}
        {% if Lona.client_version == 1 %}
          // rendering statistics ---------------------------------------------
          document.querySelector('#enable-rendering-statistics').onclick = function(event) {
            event.preventDefault();

            var loaded_nodes = document.querySelector('#loaded-nodes');
            var loaded_widgets = document.querySelector('#loaded-widgets');

            loaded_nodes.innerHTML = '';
            loaded_widgets.innerHTML = '';

            lona_context.add_rendering_hook(function(lona_window) {
              var default_window = lona_context.get_default_window();

              loaded_nodes.innerHTML = Object.keys(default_window._nodes).length;
              loaded_widgets.innerHTML = Object.keys(default_window._widget_marker).length;
            });

            return false;
          };
        {% endif %}

        lona_context.setup();
      });
    </script>
  </body>
</html>
