import React from "react"
import {graphql, Link} from "gatsby";
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"

import Seo from "../components/seo";
import styled from "@emotion/styled"
import Sidebar from "../components/docs-sidebar";
import wikiSidebar from "../../docs/sidebar-wiki.json"

import Caution from "../components/warnings/caution";

import stylingGlobals from "../styles/styling-globals"

const DocumentationContainer = styled.div`
  display: flex;
  margin: auto;
  
  @media (max-width: ${stylingGlobals.viewportSizes.tablet}) {
    flex-direction: column-reverse;
  }
  
  @media (min-width: ${stylingGlobals.viewportSizes.phone}) {
    margin-bottom: 60px;
  }
`

const ContentWrapper = styled.main`
  margin: 0 1rem;
  width: auto;
  
  @media (min-width: ${stylingGlobals.viewportSizes.tablet}) {
    margin-left: 15rem;
    margin-right: 1rem;
    width: calc(100vw - 18rem);
  }
  
  @media (min-width: ${stylingGlobals.viewportSizes.desktop}) {
    margin-left: 20rem;
    width: calc(100vw - 22rem);
  }
`

const Content = styled.section`
  max-width: 40rem;
  margin: 0 auto;
  
  @media (min-width: ${stylingGlobals.viewportSizes.desktop}) {
    max-width: 60rem;
  }
`

const shortlinks = { Caution, Link }

export default function Documentation({ location, data }) {
  const article = data.mdx
  return (
    <>
      <Seo title={article.frontmatter.title} description={article.excerpt} />
      <DocumentationContainer>
        <Sidebar sidebar={wikiSidebar} location={location} />
        <ContentWrapper>
          <Content>
            <h1>{article.frontmatter.title}</h1>
            <MDXProvider components={shortlinks}>
              <MDXRenderer>{article.body}</MDXRenderer>
            </MDXProvider>
          </Content>
        </ContentWrapper>
      </DocumentationContainer>
    </>
  )
}

export const query = graphql`
  query($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
      frontmatter {
        title
      }
      excerpt
    }
  }
`