import React, { useEffect } from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { MDXProvider } from "@mdx-js/react"

const ide =
  "https://repos.ctdo.de/-/ide/project/neri/ctdo-homepage/edit/master/-/src/markdown-pages/"

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 { mdx } = data // data.markdownRemark holds your post data
  const { frontmatter, body } = mdx

  useEffect(() => {
    document.title = `ctdo - ${frontmatter.title.toLowerCase()}`
  }, [frontmatter.title])

  const editLink = frontmatter.edit ? ide + frontmatter.edit.relativePath : null

  return (
    <Layout 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
      }
    }
  }
`