<!DOCTYPE html>
<html>
  <head>
    <title>GraphiQL</title>
    <%= stylesheet_link_tag("graphiql/rails/application") %>
    <%# TODO: This file was included to fix a CSP failure. Please remove when https://github.com/rmosolgo/graphiql-rails/pull/71 will be released %>
    <%= javascript_include_tag("graphiql/rails/application", nonce: true) %>
  </head>
  <body>
    <div id="graphiql-container">
      Loading...
    </div>
    <%= javascript_tag nonce: true do -%>
    var parameters = {};

    <% if GraphiQL::Rails.config.query_params %>
    // Parse the search string to get url parameters.
    var search = window.location.search;
    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));
     }
    });
    // if variables was provided, try to format it.
    if (parameters.variables) {
     try {
       parameters.variables =
         JSON.stringify(JSON.parse(parameters.variables), null, 2);
     } catch (e) {
       // Do nothing, we want to display the invalid JSON as a string, rather
       // than present an error.
     }
    }
    // 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() {
     var newSearch = '?' + Object.keys(parameters).map(function (key) {
       return encodeURIComponent(key) + '=' +
         encodeURIComponent(parameters[key]);
     }).join('&');
     history.replaceState(null, null, newSearch);
    }
    <% end %>

    // Defines a GraphQL fetcher using the fetch API.
    var graphQLEndpoint = "<%= graphql_endpoint_path %>";
    function graphQLFetcher(graphQLParams) {
      return fetch(graphQLEndpoint, {
        method: 'post',
        headers: <%= raw JSON.pretty_generate(GraphiQL::Rails.config.resolve_headers(self)) %>,
        body: JSON.stringify(graphQLParams),
        credentials: 'include',
      }).then(function(response) {
        return response.text();
      }).then(function(text) {
        try {
            return JSON.parse(text);
        } catch(error) {
            return {
              "message": "The server responded with invalid JSON, this is probably a server-side error",
              "response": text,
            };
        }
      })
    }

    <% if GraphiQL::Rails.config.initial_query %>
    var defaultQuery = "<%= GraphiQL::Rails.config.initial_query.gsub("\n", '\n').gsub('"', '\"').html_safe %>";
    <% else %>
    var defaultQuery = undefined
    <% end %>

    // Render <GraphiQL /> into the body.
    ReactDOM.render(
      React.createElement(GraphiQL, {
        fetcher: graphQLFetcher,
        defaultQuery: defaultQuery,
        <% if GraphiQL::Rails.config.query_params %>
        query: parameters.query,
        variables: parameters.variables,
        onEditQuery: onEditQuery,
        onEditVariables: onEditVariables
        <% end %>
      }),
      document.getElementById("graphiql-container")
    );
    <% end -%>
  </body>
</html>
