{% extends "templates/development.njk" %}

{% block title %}GraphiQL{% endblock %}

{% block css %}
{# Include the base development pieces #}
{{ super() }}
<style type="text/css">
  html, body, #graphiql {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
  }
  *, ::after, ::before {
    box-sizing: inherit;
  }
</style>
<link href="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.css" rel="stylesheet" />
{% endblock %}

{% block js %}
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
<script src="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.min.js"></script>
<script type="text/javascript">
  // 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, location) {
    return (location ? location: '') + '?' + 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];
    }
  }
  // We don't use safe-serialize for location, because it's not client input.
  var fetchURL = locationQuery(otherParams, '{{ BASE_URL }}{{ endpointURL }}');

  // Defines a GraphQL fetcher using the fetch API.
  function graphQLFetcher(graphQLParams) {
    var headers = {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    };

    try {
      let token = localStorage.getItem('token');
      if (token) {
        headers['Authorization'] = 'Bearer ' + token;
      }
    } catch (e) {
      console.error(e);
    }

    return fetch(fetchURL, {
      method: 'post',
      headers: headers,
      body: JSON.stringify(graphQLParams),
      credentials: 'include',
    }).then(function (response) {
      return response.text();
    }).then(function (responseBody) {
      try {
        return JSON.parse(responseBody);
      } catch (error) {
        return responseBody;
      }
    });
  }
  // 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 onEditOperationName(newOperationName) {
    parameters.operationName = newOperationName;
    updateURL();
  }
  function updateURL() {
    history.replaceState(null, null, locationQuery(parameters));
  }
  // Render <GraphiQL /> into the body.
  ReactDOM.render(
    React.createElement(GraphiQL, {
      fetcher: graphQLFetcher,
      onEditQuery: onEditQuery,
      onEditVariables: onEditVariables,
      onEditOperationName: onEditOperationName,
      query: null,
      response: null,
      variables: null,
      operationName: null,
    }),
    document.querySelector("#graphiql")
  );
</script>
{% endblock %}

{% block html %}
<main id="graphiql"></main>
{% endblock %}