const React = require('react');
const Head = require('next/head');

function Home() {
  const sandboxRef = React.useRef(null);

  React.useEffect(() => {
    const script = document.createElement('script');
    script.src =
      'https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js';
    script.async = true;

    script.onload = () => {
      sandboxRef.current = new window.EmbeddedSandbox({
        target: '#embedded-sandbox',
        initialEndpoint: `${window.location.origin}/api/graphql`,
        initialState: {
          document: `query TestCategoriesWithProducts {
  categories {
    id
    name
    products {
      id
      title
      price
    }
  }
}`,
        },
      });
    };

    document.body.appendChild(script);

    return () => {
      sandboxRef.current?.dispose?.();
      script.remove();
    };
  }, []);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      Head,
      null,
      React.createElement('title', null, 'GraphQL Sandbox - Lab 04')
    ),
    React.createElement('div', {
      id: 'embedded-sandbox',
      style: { width: '100vw', height: '100vh' },
    })
  );
}

module.exports = Home;