import React, { Component } from 'react'
import Helmet from 'react-helmet'
import Prism from 'prismjs'

require('prismjs/themes/prism-tomorrow.css')

import PageTransition from 'gatsby-plugin-page-transitions'
import MessengerCustomerChat from 'react-messenger-customer-chat'
import favicon32 from '../images/favicon32.png'

class PostDefault extends Component {
  componentDidMount() {
    Prism.highlightAll()
  }
  componentDidUpdate() {
    Prism.highlightAll()
  }
  render() {
    const { data } = this.props
    return (
      <PageTransition>
        <Helmet
          title={`${data.wordpressPost.title} - Saburly.com`}
          meta={[
            { name: 'description', content: 'We code & design great software' },
            {
              name: 'keywords',
              content:
                'software, design, coding, programming, code, consulting',
            },
          ]}
          link={[
            { rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` },
          ]}
        />
        <main className="container mx-auto p-4 max-w-lg sm:p-10">
          <img
            className="w-full rounded"
            src={
              data.wordpressPost.featured_media
                ? data.wordpressPost.featured_media.source_url
                : ''
            }
          />
          <h1 className="mt-4">{data.wordpressPost.title}</h1>
          <div
            className="leading-normal blog-post font-serif"
            dangerouslySetInnerHTML={{
              __html: data.wordpressPost.content,
            }}
          />
          <MessengerCustomerChat
            pageId="715686642152482"
            appId="1896398823783343"
            htmlRef="blogpost"
          />
        </main>
      </PageTransition>
    )
  }
}

export const query = graphql`
  query PostDefaultQuery($slug: String!) {
    wordpressPost(slug: { eq: $slug }) {
      title
      slug
      content
      date(formatString: "MMMM DD, YYYY")
      featured_media {
        source_url
      }
    }
  }
`

export default PostDefault