import React from "react";
import moment from 'moment';
import { graphql, Link } from 'gatsby'
import Helmet from 'react-helmet'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowLeft, faRss } from '@fortawesome/free-solid-svg-icons'

import Layout from '../components/Layout/Layout.js';
import Emoji from '../components/Emoji';

export default class BlogPost extends React.Component {

  render() {
    const post = this.props.data.markdownRemark;
    return (
      <Layout>
        <Helmet title={post.frontmatter.title}>
          {post.frontmatter.description && <meta name="description" content={post.frontmatter.description} />}
        </Helmet>
        <h4><FontAwesomeIcon icon={faArrowLeft} /> <Link to='/blog/'>More posts</Link></h4>

        <h1>{post.frontmatter.title}</h1>
        <h4>{moment(post.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(post.frontmatter.date).fromNow()})</small></i>
        {post.frontmatter.tags && post.frontmatter.tags.map(tag => 
          <Link style={{marginLeft: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
        )}
        </h4>

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('100daystooffload') > -1 &&
          <div style={{background: 'beige', padding: 4, borderRadius: 3, margin: '20px 0px'}}>
            <h3><Emoji e='💯' /> 100 Days to Offload</h3>
            <p><b>This article is one of a series of posts in the <Link to='/blog/2021/01/29/100-days-to-offload'>100 Days to Offload challenge</Link></b>.
            The challenge focuses on writing <i>lots</i> rather than <em>quality</em>, so apologies for typos or inaccuracies.</p>
            <p><Link to='/tags/100daystooffload'>View other articles in this series</Link></p>
          </div>
        }

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('book') > -1 &&
          <div style={{background: 'linen', padding: 4, borderRadius: 3, margin: '20px 0px'}}>
            <h3><Emoji e='📚' /> This article is about a book</h3>
            <p>A quick warning: I always try to avoid giving away spoilers but be careful if you're worried about finding out too much.</p>
          </div>
        }

        {moment(post.frontmatter.date).isBefore(moment().subtract(12, 'months')) &&
          <div style={{background: 'lightpink', padding: 4, borderRadius: 3, margin: '20px 0px'}}>
            <h3><Emoji e='🕰️' /> This is an old post</h3>
            <p>Please note that this article was posted quite a while ago and may now be out-of-date or inaccurate.</p>
          </div>
        }

        <article className='post' style={{marginTop: 10}}>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
        </article>

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('book') > -1 &&
          <div style={{background: 'linen', padding: 4, borderRadius: 3, margin: '20px 0px'}}>
            <h3><Emoji e='📚' /> I try and read a wide variety of books</h3>
            <p>If you're interested in seeing what else I read you can <a href="https://www.goodreads.com/user/show/22390023-will" target="_blank" rel="noopener noreferrer">check out my Goodreads profile</a>.</p>
          </div>
        }

        <div style={{background: 'honeydew', padding: 4, borderRadius: 3, marginTop: 10}}>
          <h3><Emoji e='📲' /> Enjoyed this article? Subscribe to updates!</h3>
          <p>If you would like to read more posts like this, then you can subscribe via RSS.</p>
          <p><FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>Subscribe to an RSS feed</Link></p>
        </div>
      </Layout>
    );
  }
};

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        description
        date
        tags
      }
    }
  }
`;
