drab

(function () {
  "use strict";
  function did() {
    return "d" + window.Drab.counter++;
  }

  function generateUUID() {
    var d = new Date().getTime();
    if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
      d += performance.now();
    }
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
  }

  function client_id() {
    var id = localStorage.getItem("client_id");
    if (id) {
      return id;
    } else {
      id = generateUUID();
      localStorage.setItem("client_id", id);
      return id
    }
  }

  function closest(el, fn) {
    return el && (fn(el) ? el : closest(el.parentNode, fn));
  }

  window.Drab = {
    create: function (drab_return_token, drab_session_token, broadcast_topic) {
      this.Socket = <%= Drab.Config.get(endpoint, :js_socket_constructor) %>;

      this.drab_return_token = drab_return_token;
      this.drab_session_token = drab_session_token;
      this.self = this;
      this.counter = 0;
      this.myid = client_id();
      this.onload_launched = false;
      this.already_connected = false;
      this.drab_topic = broadcast_topic;
      this.client_lib_version = <%= client_lib_version %>;
    },
    connect: function (additional_token) {

      var drab = this;

      for (var i = 0; i < drab.load.length; i++) {
        var fx = drab.load[i];
        fx(drab);
      }

      var params = Object.assign({ __drab_return: this.drab_return_token }, additional_token);
      params = Object.assign(params, {
        __client_lib_version: Drab.client_lib_version,
        __client_id: Drab.myid
      });
      this.socket = new this.Socket("<%= Drab.Config.get(endpoint, :socket) %>", {
        params: params
      });
      // this.socket.onError(function(ev) {console.log("SOCKET ERROR", ev);});
      // this.socket.onClose(function(ev) {console.log("SOCKET CLOSE", ev);});

      this.socket.connect();
      this.channel = this.socket.channel(this.drab_topic, {});

      this.channel.join().receive("error", function (resp) {
        console.log("Unable to join the Drab Channel", resp);
      }).receive("ok", function (resp) {
        // launch on_connect
        for (var c = 0; c < drab.connected.length; c++) {
          var fxc = drab.connected[c];
          fxc(resp, drab);
        }
        drab.already_connected = true;
        drab.already_disconnected = false;
        // event is sent after Drab finish processing the event
        drab.channel.on("event", function (message) {
          if (message.finished && drab.event_reply_table[message.finished]) {
            drab.event_reply_table[message.finished]();
            delete drab.event_reply_table[message.finished];
          }
        });
      });

      this.socket.onClose(function (event) {
        if (!drab.already_disconnected) {
          drab.already_disconnected = true;
          for (var di = 0; di < drab.disconnected.length; di++) {
            var fxd = drab.disconnected[di];
            fxd(drab);
          }
        }
      });
    },
    //
    //   event_handler -  string - function name in Phoenix Commander
    //   payload: object - will be passed as the second argument to the Event Handler
    //   execute_after - callback to function executes after event finish
    exec_elixir: function (event_handler, payload, execute_after) {
      var reply_to = did();
      if (execute_after) {
        Drab.event_reply_table[reply_to] = execute_after;
      }
      var message = {
        event_handler_function: event_handler,
        payload: payload,
        reply_to: reply_to
      };
      this.channel.push("event", message);
    },
    error: function (message) {
      console.log("[drab] " + message);
      if (this.channel) {
        Drab.exec_elixir("Drab.Logger.error", {message: message});
      }
    },
    connected: [],
    disconnected: [],
    load: [],
    change: [],
    additional_payloads: [],
    event_reply_table: {},
    on_connect: function (f) {
      this.connected.push(f);
    },
    on_disconnect: function (f) {
      this.disconnected.push(f);
    },
    on_load: function (f) {
      this.load.push(f);
    },
    on_change: function(f) {
      this.change.push(f);
    },
    add_payload: function (f) {
      this.additional_payloads.push(f);
    },
    set_drab_store_token: function(token) {
      <%= Drab.Template.render_template(endpoint, "drab.store.#{Drab.Config.get(endpoint, :drab_store_storage)}.set.js", []) %>
    },
    get_drab_store_token: function() {
      <%= Drab.Template.render_template(endpoint, "drab.store.#{Drab.Config.get(endpoint, :drab_store_storage)}.get.js", []) %>
    },
    get_drab_session_token: function () {
      return this.drab_session_token;
    }
  };

  <%=
    Enum.map(templates, fn template ->
      Drab.Template.render_template(endpoint, template, [endpoint: endpoint])
    end)
  %>

  Drab.create('<%= controller_and_action %>', '<%= drab_session_token %>', '<%= broadcast_topic %>');
  <%= if connect do %>
    Drab.connect();
  <% end %>
})();