import React from 'react';
import { MDXProvider } from '@mdx-js/react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import renderRoutes from '@docusaurus/renderRoutes';
import Layout from '@theme/Layout';
import DocSidebar from '@theme/DocSidebar';
import MDXComponents from '@theme/MDXComponents';
import NotFound from '@theme/NotFound';
import { matchPath } from '@docusaurus/router';

function DocPageContent({ currentDocRoute, versionMetadata, children }) {
  const { permalinkToSidebar, docsSidebars } = versionMetadata;
  const sidebarName = permalinkToSidebar[currentDocRoute.path];
  const sidebar = docsSidebars[sidebarName];
  return (
    <>
      <div className="wrap-last frame docpage">
        {sidebar && <DocSidebar sidebar={sidebar} path={currentDocRoute.path} />}
        <div className="docpage-content">
          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
        </div>
      </div>
    </>
  );
}

function DocPage(props) {
  const {
    route: { routes: docRoutes },
    versionMetadata,
    versionMetadata: { version },
    location,
  } = props;
  const { isClient } = useDocusaurusContext();
  const currentDocRoute = docRoutes.find((docRoute) => matchPath(location.pathname, docRoute));

  if (!currentDocRoute) {
    return <NotFound {...props} />;
  }

  return (
    <Layout version={version} key={isClient} {...props}>
      <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
        {renderRoutes(docRoutes)}
      </DocPageContent>
    </Layout>
  );
}

export default DocPage;