import React from 'react';
import usePromise from 'react-promise';
import BrowserOnly from '@docusaurus/BrowserOnly';
import Link from '@theme/Link';
import Layout from '@theme/Layout';
import useBaseUrl from '@docusaurus/useBaseUrl';

const Redoc = (props) => {
  const getRedocStandalone = React.useCallback(async () => {
    // NOTE: using import() instead of require() keeps the package tree-shakeable.
    const redoc = await import('redoc');
    return redoc.RedocStandalone;
  }, []);

  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => {
        // we need to import this here instead of at the top-level
        // because it causes issues in production builds
        const { value: RedocStandalone, loading } = usePromise(getRedocStandalone);
        return loading ? <div>Loading...</div> : <RedocStandalone {...props} />;
      }}
    </BrowserOnly>
  );
};

export default function RedocPage({ pageData }) {
  return (
    <Layout>
      <div className="wrap-last frame">
        <div className="redoc-navbar">
          <Link className="redoc-navbar-link" to={useBaseUrl('/')}>
            ← Back to index
          </Link>
        </div>
        <Redoc
          specUrl={pageData.specUrl}
          options={{
            scrollYOffset: '.top-navbar',
          }}
        />
      </div>
    </Layout>
  );
}