text: import React from "react"
  import { Link, graphql } from "gatsby"
  import Image from "gatsby-image"
  import parse from "html-react-parser"
  
  // We're using Gutenberg so we need the block styles
  // these are copied into this project due to a conflict in the postCSS
  // version used by the Gatsby and @wordpress packages that causes build
  // failures.
  // @todo update this once @wordpress upgrades their postcss version
  import "../css/@wordpress/block-library/build-style/style.css"
  import "../css/@wordpress/block-library/build-style/theme.css"
  
  import Bio from "../components/bio"
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  // import Hero from "../components/Hero"
  
  const BlogPostTemplate = ({ data: { previous, next, post } }) => {
    const featuredImage = {
      fluid: post.featuredImage?.node?.localFile?.childImageSharp?.fluid,
      alt: post.featuredImage?.node?.alt || ``,
    }
  
    const favouriteImage = {
      fluid: post.acfDemoFields?.favouriteImage?.localFile?.childImageSharp?.fluid,
      alt: post.acfDemoFields?.favouriteImage?.altText || ``,
    }
  
    console.log({favouriteImage});
  
    return (
      <Layout>
        <Seo title={post.title} description={post.excerpt} />
        <article
          className="blog-post"
          itemScope
          itemType="http://schema.org/Article"
        >
          <header>
            <h1 itemProp="headline">{parse(post.title)}</h1>
  
            <p>{post.date}</p>
  
            {/* if we have a featured image for this post let's display it */}
            {featuredImage?.fluid && (
              <Image
                fluid={featuredImage.fluid}
                alt={featuredImage.alt}
                style={{ marginBottom: 50 }}
              />
            )}
          </header>
  
          {/* rendering blocks */}
  
          {/* During fast refreshing of new content, there can be situations when the 
          Blocks component can resolve to null, 
          so you need to also make checks for this situation in your code. */}
  
          {/* {post.Blocks && <post.Blocks />} */}
  
          {!!post.content && (
            <section itemProp="articleBody">{parse(post.content)}</section>
          )}
  
          <br/>
  
          {!!post.acfDemoFields && !!post.acfDemoFields.justATextField && (
            <React.Fragment>
  
            <h3> ACF TEXT AREA FIELD :  {parse(post.acfDemoFields.justATextField)}</h3>
  
            <br/>
            <br/>
            <br/>
  
            {favouriteImage?.fluid && (
              <Image
                fluid={favouriteImage.fluid}
                alt={favouriteImage.alt}
                style={{ marginBottom: 50 }}
              />
            )}
            
            </React.Fragment>
            
          )}
  
          <hr />
  
          <footer>
            <Bio />
          </footer>
        </article>
  
        <nav className="blog-post-nav">
          <ul
            style={{
              display: `flex`,
              flexWrap: `wrap`,
              justifyContent: `space-between`,
              listStyle: `none`,
              padding: 0,
            }}
          >
            <li>
              {previous && (
                <Link to={previous.uri} rel="prev">
                  ← {parse(previous.title)}
                </Link>
              )}
            </li>
  
            <li>
              {next && (
                <Link to={next.uri} rel="next">
                  {parse(next.title)} →
                </Link>
              )}
            </li>
          </ul>
        </nav>
      </Layout>
    )
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostById(
      # these variables are passed in via createPage.pageContext in gatsby-node.js
      $id: String!
      $previousPostId: String
      $nextPostId: String
    ) {
      # selecting the current post by id
      post: wpPost(id: { eq: $id }) {
        id
        acfDemoFields{
          fieldGroupName
          justATextField
          textarea
          favouriteImage {
            altText
            localFile {
              childImageSharp {
                fluid(maxWidth: 1000, quality: 100) {
                  ...GatsbyImageSharpFluid_tracedSVG
                }
              }
            }
            sourceUrl
          }
        }
        excerpt
        content
        #Blocks
        title
        date(formatString: "MMMM DD, YYYY")
  
        featuredImage {
          node {
            altText
            localFile {
              childImageSharp {
                fluid(maxWidth: 1000, quality: 100) {
                  ...GatsbyImageSharpFluid_tracedSVG
                }
              }
            }
          }
        }
      }
  
      # this gets us the previous post by id (if it exists)
      previous: wpPost(id: { eq: $previousPostId }) {
        uri
        title
      }
  
      # this gets us the next post by id (if it exists)
      next: wpPost(id: { eq: $nextPostId }) {
        uri
        title
      }
    }
  `
  