import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from '@mdx-js/react'
import { Helmet } from 'react-helmet'

const ide =
  'https://repos.ctdo.de/neri/ctdo-homepage/_edit/master/src/webpages/'

const MdLeakH1 = (props) => <h2 {...props}># {props.children}</h2>
const MdLeakH2 = (props) => <h3 {...props}>## {props.children}</h3>
const MdLeakH3 = (props) => <h4 {...props}>### {props.children}</h4>
const MdLeakH4 = (props) => <h5 {...props}>#### {props.children}</h5>

const components = {
  h1: MdLeakH1,
  h2: MdLeakH2,
  h3: MdLeakH3,
  h4: MdLeakH4,
}

export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const {
    frontmatter: { title, edit, path },
    body,
  } = data.mdx

  const editLink = edit ? ide + edit : null

  return (
    <>
      <Helmet
        htmlAttributes={{
          lang: 'de',
        }}
        title={`ctdo - ${title.toLowerCase()}`}
      />
      <Layout path={path} editLink={editLink}>
        <MDXProvider components={components}>
          <MDXRenderer>{body}</MDXRenderer>
        </MDXProvider>
      </Layout>
    </>
  )
}

export const pageQuery = graphql`
  query ($path: String!) {
    mdx(frontmatter: { path: { eq: $path } }) {
      body
      frontmatter {
        title
        edit
        path
      }
    }
  }
`