import React from "react";
import { graphql, Link } from "gatsby";
import Layout from '../components/layout';
import SEO from '../components/seo';
import {
  Nav,
  NavItem,
  NavList,
  NavExpandable,
  PageSection,
  PageSectionVariants,
  TextContent
} from '@patternfly/react-core';
import { PatternFlyThemeProvider } from '@patternfly/react-styled-system';
import { Location } from '@reach/router';
import { MDXRenderer } from '../components/mdx-renderer';
import './template.scss';

const navBuilder = navData => {
  return (
    <Location>
      {({ location }) => {
        // console.log(location);
        const currentPath = location.pathname;
        return (
          <Nav className="pf-site-md-nav" aria-label="Nav">
            <NavList>
              {navData.map(({ node }) => node.subNav ? (
                <NavExpandable key={node.text} title={node.text} isExpanded={currentPath.indexOf(node.path) > -1} isActive={currentPath.indexOf(node.path) > -1}>
                  {node.subNav.map(item => (
                    <NavItem
                      itemId={item.path}
                      key={item.path}
                      isActive={currentPath.indexOf(item.path) > -1}
                    >
                      <Link to={item.path}>
                        {item.text}
                      </Link>
                    </NavItem>
                  ))}
                </NavExpandable>
              ): (
                <NavItem
                  itemId={node.path}
                  key={node.path}
                  isActive={currentPath.indexOf(node.path) > -1}
                >
                  <Link to={node.path}>
                    {node.text}
                  </Link>
                </NavItem>
              ))}
            </NavList>
          </Nav>
        );
      }}
    </Location>
  );
};

export default function ContentTemplate ({
  data // this prop will be injected by the GraphQL query below.
}) {
  let SideNav;
  const { mdx, allGetStartedNavigationJson, allDesignGuidelinesNavigationJson } = data;
  const { frontmatter } = mdx;

  if (frontmatter.path.indexOf('/get-started') > -1 ) {
    SideNav = navBuilder(allGetStartedNavigationJson.edges);
  } else if (frontmatter.path.indexOf('/design-guidelines') > -1 ) {
    SideNav = navBuilder(allDesignGuidelinesNavigationJson.edges);
  }

  return (
    <Layout sideNav={SideNav}>
      <SEO title="Docs" keywords={['gatsby', 'application', 'react']} />
      <PageSection className="pageSectionStyles markdown-body" variant={PageSectionVariants.light}>
        <PatternFlyThemeProvider>
          <TextContent>
            <MDXRenderer>
              {mdx.code.body}
            </MDXRenderer>
          </TextContent>
        </PatternFlyThemeProvider>
      </PageSection>
    </Layout>
  )
}

export const pageQuery = graphql`
  query($path: String!) {
    mdx(frontmatter: { path: { eq: $path } }) {
      code {
        body
      }
      frontmatter {
        path
      }
    }
    allGetStartedNavigationJson {
      edges {
        node {
          text
          path
        }
      }
    }
    allDesignGuidelinesNavigationJson {
      edges {
        node {
          text
          path
          subNav {
            text
            path
          }
        }
      }
    }
  }
`

@@ -2037,16 +2037,45 @@
 tionJson
+, allContributeNavigationJson
  %7D = dat
@@ -2365,16 +2365,139 @@
 es);%0A  %7D
+ else if (frontmatter.path.indexOf('/contribute') %3E -1 ) %7B%0A    SideNav = navBuilder(allContributeNavigationJson.edges);%0A  %7D
 %0A%0A  retu
@@ -3442,14 +3442,131 @@
 %7D%0A    %7D%0A
+    allContributeNavigationJson %7B%0A      edges %7B%0A        node %7B%0A          text%0A          path%0A        %7D%0A      %7D%0A    %7D%0A
   %7D%0A%60%0A

make sidebar visible