import * as React from 'react'
import { graphql, PageProps } from 'gatsby'

import Layout from '../components/layout'
import Seo from '../components/seo'

import { Section } from '../components/shared'
import Post from './post'
import { SideBar } from './sidebar'

import type { PostNode, PageContext } from '../types'

const BlogPostTemplate: React.FC<
  PageProps<{ post: PostNode }, PageContext>
> = ({ data, location, pageContext }) => {
  const { post } = data

  return (
    <Layout location={location} heroSection={false}>
      <Section color="black" bgColor="white" bottomArrow={false}>
        <div className="row">
          <div className="col-md-7">
            <Post post={post} location={location} />
          </div>
          <div className="col-md-5">
            <SideBar pageContext={pageContext} location={location} />
          </div>
        </div>
      </Section>
    </Layout>
  )
}

export default BlogPostTemplate

export const Head: React.FC<{ data: { post: PostNode } }> = ({ data }) => {
  const { post } = data
  const { previewImg } = post.frontmatter

  return (
    <Seo
      title={post.frontmatter.title}
      description={post.frontmatter.description}
      previewImg={
        previewImg?.childImageSharp?.gatsbyImageData?.images?.fallback?.src
      }
    />
  )
}

export const pageQuery = graphql`
  query PostByPath($id: String!) {
    post: markdownRemark(id: { eq: $id }) {
      id
      html
      fields {
        slug
      }
      frontmatter {
        title
        description
        date(formatString: "MMMM DD, YYYY")
        author
        authorLink
        previewImg {
          childImageSharp {
            gatsbyImageData(layout: CONSTRAINED)
          }
        }
        tags
      }
    }
  }
`