<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <script src="{{ prefix | safe }}/_nicegui/static/socket.io.min.js"></script>
    <link href="{{ favicon_url }}" rel="shortcut icon" />
    <link href="{{ prefix | safe }}/_nicegui/static/fonts.css" rel="stylesheet" type="text/css" />
    <link href="{{ prefix | safe }}/_nicegui/static/quasar.prod.css" rel="stylesheet" type="text/css" />
    {% if tailwind %}
    <script src="{{ prefix | safe }}/_nicegui/static/tailwind.min.js"></script>
    {% endif %}
    <link href="{{ prefix | safe }}/_nicegui/static/nicegui.css" rel="stylesheet" type="text/css" />
    {{ head_html | safe }}
  </head>
  <body>
    <script src="{{ prefix | safe }}/_nicegui/static/vue.global.prod.js"></script>
    <script src="{{ prefix | safe }}/_nicegui/static/quasar.umd.prod.js"></script>

    {{ body_html | safe }}

    <div id="app"></div>
    <div id="popup">
      <span>Connection lost.</span>
      <span>Trying to reconnect...</span>
    </div>
    <script type="module">
      const True = true;
      const False = false;
      const None = undefined;

      const elements = {{ elements | safe }};

      const throttles = new Set();
      function throttle(callback, time, id) {
        if (time <= 0) {
          callback();
          return;
        }
        if (throttles.has(id)) return;
        throttles.add(id);
        callback();
        setTimeout(() => throttles.delete(id), 1000 * time);
      }

      function renderRecursively(elements, id) {
        const element = elements[id];
        const props = {
          id: element.id,
          ref: 'r' + element.id,
          class: element.class.join(' ') || undefined,
          style: Object.entries(element.style).reduce((str, [p, val]) => `${str}${p}:${val};`, '') || undefined,
          ...element.props,
        };
        Object.values(element.events).forEach((event) => {
          const event_name = 'on' + event.type[0].toLocaleUpperCase() + event.type.substring(1);
          const throttler = {active: false};
          props[event_name] = Vue.withModifiers((e) => {
            const all = typeof e !== 'object' || event.args.includes('*');
            const args = all ? e : Object.fromEntries(event.args.map(a => [a, e[a]]));
            throttle(() => window.socket.emit("event", {id: element.id, type: event.type, args}), event.throttle, event_name);
          }, event.modifiers);
        });
        const slots = {};
        Object.entries(element.slots).forEach(([name, ids]) => {
          const children = ids.map(id => renderRecursively(elements, id));
          if (name == 'default' && element.text) {
            children.unshift(element.text);
          }
          slots[name] = () => children;
        });
        return Vue.h(Vue.resolveComponent(element.tag), props, slots);
      }

      function getElement(id) {
        return window.app.$refs['r' + id];
      }

      function runJavascript(code, request_id) {
        (new Promise((resolve) =>resolve(eval(code)))).catch((reason) => {
          if(reason instanceof SyntaxError)
            return eval(`(async() => {${code}})()`);
          else
            throw reason;
        }).then((result) => {
          if (request_id) {
            window.socket.emit("javascript_response", {request_id, result});
          }
        });
      }

      const app = Vue.createApp({
        data() {
          return {
            elements,
          };
        },
        render() {
          return renderRecursively(this.elements, 0);
        },
        mounted() {
          window.app = this;
          const query = { client_id: "{{ client_id }}" };
          const url = window.location.protocol === 'https:' ? 'wss://' : 'ws://' + window.location.host;
          const extraHeaders = {{ socket_io_js_extra_headers | safe }};
          window.path_prefix = "{{ prefix | safe }}";
          window.socket = io(url, { path: "{{ prefix | safe }}/ws/socket.io", query, extraHeaders });
          window.socket.on("connect", () => {
            window.socket.emit("handshake", (ok) => {
              if (!ok) window.location.reload();
              document.getElementById('popup').style.opacity = 0;
            });
          });
          window.socket.on("connect_error", (err) => {
            if (err.message == 'timeout') window.location.reload(); // see https://github.com/zauberzeug/nicegui/issues/198
          });
          window.socket.on("disconnect", () => {
            document.getElementById('popup').style.opacity = 1;
          });
          window.socket.on("update", (msg) => {
            Object.entries(msg.elements).forEach(([id, element]) => this.elements[element.id] = element);
          });
          window.socket.on("run_method", (msg) => getElement(msg.id)?.[msg.name](...msg.args));
          window.socket.on("run_javascript", (msg) => runJavascript(msg['code'], msg['request_id']));
          window.socket.on("open", (msg) => (location.href = msg));
          window.socket.on("notify", (msg) => Quasar.Notify.create(msg));
        },
      }).use(Quasar, {
        config: {
          brand: {
            primary: '#5898d4',
          },
          loadingBar: {
            color: 'primary'
          },
        }
      });

      {{ vue_scripts | safe }}
      {{ js_imports | safe }}

      const dark = {{ dark }};
      Quasar.Dark.set(dark === None ? "auto": dark);

      app.mount("#app");
    </script>
  </body>
</html>
