text: import React from "react";
  import PropTypes from "prop-types";
  import { graphql } from "gatsby";
  import styled from "styled-components";
  import { MDXRenderer } from "gatsby-plugin-mdx";
  import { MDXProvider } from "@mdx-js/react";
  
  import { FONT_WEIGHT, THEME, PALETTE } from "constants/styles";
  import { documentationComponents } from "constants/docsComponentMapping";
  import { docType } from "constants/docType";
  
  import { slugify } from "helpers/slugify";
  import { smoothScrollTo } from "helpers/dom";
  import {
    buildRelPath,
    findInitialOpenTopics,
    findArticle,
    buildDocsContents,
  } from "helpers/documentation";
  import { getDescriptionFromAst } from "helpers/mdx";
  import { normalizeRoute } from "helpers/routes";
  
  import { BasicButton } from "basics/Buttons";
  import { EditIcon } from "basics/Icons";
  import { Column, Container, Row } from "basics/Grid";
  import { OriginalFileContext, BasicLink } from "basics/Links";
  import { PrismStyles } from "basics/Prism";
  import { Article, H1, Text } from "basics/Text";
  
  import { BetaNotice } from "components/BetaNotice";
  import { LeftNav } from "components/Documentation/LeftNav";
  import { Footer } from "components/Footer";
  import { LayoutBase } from "components/layout/LayoutBase";
  import { MobileLeftNav } from "components/Documentation/MobileLeftNav";
  import { SideNavBody, Provider as SideNavProvider } from "components/SideNav";
  import { SideNavProgressContext } from "components/SideNav/Provider";
  import {
    SideNavBackground,
    NavLogo,
    NavColumn,
  } from "components/Navigation/SharedStyles";
  import { Search } from "components/Search";
  
  import Clock from "assets/icons/clock.svg";
  import DevelopersPreview from "assets/images/og_developers.jpg";
  
  const contentId = "content";
  
  const RightNavEl = styled.div`
    font-size: 0.875rem;
    line-height: 1rem;
    padding-top: 4.25rem;
    overflow-y: hidden;
    position: sticky;
    top: 0;
    margin: 0;
  
    li:before {
      display: none;
    }
  `;
  const NavItemEl = styled(BasicButton)`
    display: block;
    line-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: ${FONT_WEIGHT.normal};
    color: ${(props) => (props.isActive ? THEME.text : THEME.lightGrey)};
    padding: 0.25rem 0;
    text-align: left;
  
    &:focus {
      outline: 0;
    }
  `;
  const OutlineTitleEl = styled.div`
    text-transform: uppercase;
    font-weight: ${FONT_WEIGHT.bold};
    padding: 0.75rem 0;
  `;
  const NextUpEl = styled.div`
    font-weight: ${FONT_WEIGHT.bold};
    font-size: 0.875rem;
    text-transform: uppercase;
    border-radius: 2px;
    background-color: rgba(62, 27, 219, 0.04);
    padding: 1em;
  
    a {
      color: ${PALETTE.purpleBlue};
    }
  `;
  const ModifiedEl = styled.div`
    color: ${THEME.lightGrey};
    font-size: 0.875rem;
    padding: 1rem 0;
  
    svg {
      margin-right: 0.5em;
      vertical-align: middle;
    }
  
    ${Text} {
      display: inline-block;
      vertical-align: middle;
      color: ${PALETTE.lightGrey};
      margin: 0;
    }
  `;
  
  const PageOutlineItem = ({ id, isActive, title }) => {
    const { setActiveNode, setIsNavClicked } = React.useContext(
      SideNavProgressContext,
    );
  
    return (
      <NavItemEl
        isActive={isActive}
        onClick={(e) => {
          e.preventDefault();
          setIsNavClicked(true);
          setActiveNode(document.getElementById(id));
          smoothScrollTo(document.getElementById(id), { duration: 0.55 }, () => {
            setIsNavClicked(false);
          });
        }}
      >
        {title}
      </NavItemEl>
    );
  };
  
  const Documentation = ({ data, pageContext, location }) => {
    const { articleBody, allFile } = data;
    const { relativeDirectory, name, rootDir } = pageContext;
  
    const docsContents =
      location.state?.compiledDocsContents ||
      buildDocsContents(allFile.group, rootDir);
  
    const pagePath = buildRelPath(relativeDirectory, rootDir);
  
    const initialTopicsState = findInitialOpenTopics(
      allFile.group,
      pagePath,
      rootDir,
    );
  
    const { relativePath: originalFilePath } = articleBody;
    const { body, headings, mdxAST: mdxAst } = articleBody.childMdx;
    const {
      title: header,
      modifiedTime,
      githubLink,
      nextUp: articleNextUp,
      url,
    } = findArticle(pagePath, docsContents)[name];
  
    const description = React.useMemo(() => getDescriptionFromAst(mdxAst), [
      mdxAst,
    ]);
  
    const pageOutline = headings.map(({ value }) => ({
      href: `#${slugify(value)}`,
      title: value,
    }));
  
    const left = (
      <LeftNav
        docsContents={docsContents}
        currentUrl={url}
        initialTopicsState={initialTopicsState}
        rootDir={rootDir}
      />
    );
    const center = (
      <OriginalFileContext.Provider value={originalFilePath}>
        <Search />
        <BetaNotice />
        <Article>
          <H1>{header}</H1>
          {githubLink && (
            <BasicLink href={githubLink} newTab>
              <EditIcon color={PALETTE.purpleBlue} />
            </BasicLink>
          )}
          <MDXRenderer>{body}</MDXRenderer>
          <ModifiedEl>
            <Clock />
            <Text>Last updated {modifiedTime}</Text>
          </ModifiedEl>
          {articleNextUp && (
            <NextUpEl>
              Next Up:{" "}
              <BasicLink
                href={articleNextUp.url}
                state={{ compiledDocsContents: docsContents }}
              >
                {articleNextUp.title}
              </BasicLink>
            </NextUpEl>
          )}
        </Article>
        <Footer />
      </OriginalFileContext.Provider>
    );
    const right = (
      <RightNavEl>
        <OutlineTitleEl>Page Outline</OutlineTitleEl>
        <SideNavBody items={pageOutline} renderItem={PageOutlineItem} />
      </RightNavEl>
    );
  
    return (
      <MDXProvider components={documentationComponents}>
        <LayoutBase
          title={
            normalizeRoute(location.pathname) === "/docs/"
              ? "Stellar Documentation"
              : `${header} – Stellar Documentation`
          }
          description={description}
          previewImage={DevelopersPreview}
          pageContext={pageContext}
        >
          <PrismStyles isDoc />
          <MobileLeftNav
            docsContents={docsContents}
            currentUrl={url}
            initialTopicsState={initialTopicsState}
            rootDir={rootDir}
          />
          <SideNavProvider>
            <Container id={contentId}>
              <Row>
                <NavColumn xs={{ hide: true }} sm={3} lg={3}>
                  <NavLogo pageName={docType.doc} />
                  <SideNavBackground />
                  {left}
                </NavColumn>
                <Column sm={5} md={7}>
                  {center}
                </Column>
                {pageOutline.length > 0 && (
                  <Column xs={{ hide: true }} md={2}>
                    {right}
                  </Column>
                )}
              </Row>
            </Container>
          </SideNavProvider>
        </LayoutBase>
      </MDXProvider>
    );
  };
  
  Documentation.propTypes = {
    data: PropTypes.object.isRequired,
    pageContext: PropTypes.object.isRequired,
    location: PropTypes.object,
  };
  
  PageOutlineItem.propTypes = {
    isActive: PropTypes.bool,
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  };
  
  export default Documentation;
  
  export const pageQuery = graphql`
    query DocumentationQuery($mdxId: String) {
      articleBody: file(childMdx: { id: { eq: $mdxId } }) {
        relativePath
        childMdx {
          body
          mdxAST
          headings(depth: h2) {
            value
          }
        }
      }
      allFile(
        filter: {
          sourceInstanceName: { eq: "docs" }
          extension: { eq: "mdx" }
          relativePath: { regex: "/docs/" }
        }
        sort: { fields: [childMdx___frontmatter___order] }
      ) {
        group(field: relativeDirectory) {
          fieldValue
          nodes {
            id
            modifiedTime(formatString: "MMM. DD, YYYY")
            name
            relativePath
            childMdx {
              id
              frontmatter {
                title
                order
              }
            }
            fields {
              metadata {
                data {
                  order
                  title
                  sortMethod
                }
              }
            }
          }
        }
      }
    }
  `;
  