import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";
import { DiscussionEmbed } from 'disqus-react';

export default function Post({ data }) {
	const post = data.markdownRemark;
	const siteMetadata = data.site.siteMetadata;

	var tags = post.frontmatter.tags.map((tag) => {
		return (<a key={tag} href={'/tags/' + tag}>#{tag}</a>);
	});
	var categories = post.frontmatter.categories.map((category) => {
		return (<a key={category} href={'/categories/' + category}>{category}</a>);
	});

	return (
		<Layout title={siteMetadata.title} tagline={siteMetadata.tagline}>
			<article className="post">
				<h1 className="post-title">{post.frontmatter.title}</h1>
				<div className="post-info d-flex justify-content-start">
					<time dateTime={post.frontmatter.isoDate} className="post-date">
						{post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
					</time>
					<nav className="post-tags">
						{tags}
					</nav>
					<nav className="post-categories">
						<span>posted in:</span>
						{categories}
					</nav>
				</div>
				<div dangerouslySetInnerHTML={{ __html: post.html }} />
			</article>

			<DiscussionEmbed
				shortname='fishybusiness'
				config={
					{
						url: "https://www.benramey.com" + post.fields.slug,
						identifier: post.fields.slug,
						title: post.frontmatter.title,
						language: 'en_US'
					}
				} />
		</Layout>
	)
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      fields {
		  slug
	  }
      frontmatter {
        title
        formattedDate: date(formatString: "ddd MMM Do YYYY")
        isoDate: date(formatString: "")
        fromNowDate:date(fromNow:true)
        categories
        tags
      }
    }
    site {
		...HeaderInfo
    }
    sitePage {
      path
    }
  }
`