<!--
The request to this GraphQL server provided the header "Accept: text/html"
and as a result has been presented GraphiQL - an in-browser IDE for
exploring GraphQL.
If you wish to receive JSON, provide the header "Accept: application/json" or
add "&raw" to the end of the URL within a browser.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>GraphiQL</title>
  
  <style>
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      width: 100%;
    }

    #root {
      height: 100%;
    }
  </style>
  <link href="<%= assets["graphiql/graphiql.css"] %>" rel="stylesheet" />
</head>
<body>
  <div id="root"></div>
  <script src="<%= assets["whatwg-fetch/fetch.js"] %>"></script>
  <script src="<%= assets["react/react.js"] %>"></script>
  <script src="<%= assets["react-dom/react-dom.js"] %>"></script>
  <script src="<%= assets["graphiql/graphiql.js"] %>"></script>
  <script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>"></script>
  <script>
    // Collect the URL parameters
    var parameters = {};
    window.location.search.substr(1).split('&').forEach(function (entry) {
      var eq = entry.indexOf('=');
      if (eq >= 0) {
        parameters[decodeURIComponent(entry.slice(0, eq))] =
          decodeURIComponent(entry.slice(eq + 1));
      }
    });
    // Produce a Location query string from a parameter object.
    function locationQuery(params) {
      return '?' + Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' +
          encodeURIComponent(params[key]);
      }).join('&');
    }
    // Derive a fetch URL from the current URL, sans the GraphQL parameters.
    var graphqlParamNames = {
      query: true,
      variables: true,
      operationName: true
    };
    var otherParams = {};
    for (var k in parameters) {
      if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
        otherParams[k] = parameters[k];
      }
    }

    var fetchURL = locationQuery(otherParams);
    var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
    var wsUrl = <%= if socket_url do %> <%= socket_url %><% else %>'ws://localhost:4000/socket'<% end %>;

    var subscriptionsClient = new AbsintheSocketGraphiql.SubscriptionsClient(wsUrl, {});
    var fetcher = AbsintheSocketGraphiql.createFetcher(fetchURL, subscriptionsClient, 'Your subscription data will appear here after server publication!');

    // When the query and variables string is edited, update the URL bar so
    // that it can be easily shared.
    function onEditQuery(newQuery) {
      parameters.query = newQuery;
      updateURL();
    }
    function onEditVariables(newVariables) {
      parameters.variables = newVariables;
      updateURL();
    }
    function updateURL() {
      history.replaceState(null, null, locationQuery(parameters));
    }
    // Render <GraphiQL />
    ReactDOM.render(
      React.createElement(GraphiQL, {
        fetcher,
        onEditQuery: onEditQuery,
        onEditVariables: onEditVariables,
        query: '<%= query_string %>',
        response: '<%= result_string %>',
        variables: '<%= variables_string %>',
      }),
      document.getElementById("root")
    );
  </script>
</body>
</html>
