import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import Helmet from 'react-helmet'
import Header from '../../components/Header'
import { Title, Subtitle } from '../../components/Typography'
import MarkdownContent from './MarkdownContent'
import { useSiteMetadata } from '../../utils/hooks'
import unwidow from '../../utils/unwidow'

import 'lowmess-prism'

const BlogPostTemplate = ({ data }) => {
  const { title, siteUrl } = useSiteMetadata()

  const post = data.markdownRemark

  return (
    <>
      <Helmet>
        <title>
          {post.frontmatter.title} • {title}
        </title>

        <meta name="description" content={post.frontmatter.description} />

        <meta name="twitter:site" content="@lowmess" />
        <meta name="twitter:card" content="summary" />
        <meta property="og:site_name" content={title} />
        <meta
          property="og:title"
          name="twitter:title"
          content={post.frontmatter.title}
        />
        <meta property="og:url" content={`${siteUrl}${post.fields.slug}`} />
        <meta
          property="og:description"
          name="twitter:description"
          content={post.frontmatter.description}
        />
      </Helmet>

      <article>
        <Header>
          <Title>{unwidow(post.frontmatter.title)}</Title>

          <Subtitle as="p">
            <time dateTime={post.frontmatter.datetime}>
              {post.frontmatter.date}
            </time>
          </Subtitle>
        </Header>

        <MarkdownContent
          as="main"
          lineHeight="copy"
          fontSize={[1, 2]}
          dangerouslySetInnerHTML={{ __html: post.html }}
        />
      </article>
    </>
  )
}

// All the other page components get to useStaticQuery,
// but not this one cause the query takes variables 🙄
BlogPostTemplate.propTypes = {
  data: PropTypes.shape({
    markdownRemark: PropTypes.shape({
      html: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
      frontmatter: PropTypes.shape({
        title: PropTypes.string.isRequired,
        date: PropTypes.string.isRequired,
        datetime: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired,
      }).isRequired,
      fields: PropTypes.shape({
        slug: PropTypes.string.isRequired,
      }).isRequired,
    }).isRequired,
  }).isRequired,
}

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      id
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
        datetime: date(formatString: "YYYY-MM-DD")
        description
      }
      fields {
        slug
      }
    }
  }
`

export default BlogPostTemplate

@@ -1728,654 +1728,63 @@
 %0A%7D%0A%0A
-// All the other page components get to useStaticQuery,%0A// but not this one cause the query takes variables %F0%9F%99%84%0ABlogPostTemplate.propTypes = %7B%0A  data: PropTypes.shape(%7B%0A    markdownRemark: PropTypes.shape(%7B%0A      html: PropTypes.string.isRequired,%0A      id: PropTypes.string.isRequired,%0A      frontmatter: PropTypes.shape(%7B%0A        title: PropTypes.string.isRequired,%0A        date: PropTypes.string.isRequired,%0A        datetime: PropTypes.string.isRequired,%0A        description: PropTypes.string.isRequired,%0A      %7D).isRequired,%0A      fields: PropTypes.shape(%7B%0A        slug: PropTypes.string.isRequired,%0A      %7D).isRequired,%0A    %7D).isRequired,%0A  %7D)
+BlogPostTemplate.propTypes = %7B%0A  data: PropTypes.object
 .isR

simplify BlogPost propTypes