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 { config } from "@fortawesome/fontawesome-svg-core"
import "@fortawesome/fontawesome-svg-core/styles.css"

import Layout from '../components/Layout/Layout.js';
import Tag from '../components/Tag';
import Alert from '../components/Alert';
import ExternalLink from '../components/ExternalLink';

config.autoAddCss = false;

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 => <Tag tag={tag} key={tag} />)}
        </h4>

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('100daystooffload') > -1 &&
          <Alert colour='green' emoji='💯' emojiName='100 emoji' title='100 Days to Offload'>
            <p><b>This article is one of a series of posts in the <ExternalLink href="https://100daystooffload.com">100 Days to Offload challenge</ExternalLink></b>.
            The challenge focuses on writing <strong>frequency</strong> rather than <strong>quality</strong>, and so posts may not always be fully planned out. They are simply a way to offload thoughts.</p>
            <p><Link to='/tags/100daystooffload'>View other articles in this series</Link></p>
          </Alert>
        }

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('book') > -1 &&
          <Alert colour='orange' emoji='📚' emojiName='Pile of books emoji' title='This article is about a book'>
            <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>
          </Alert>
        }

        {moment(post.frontmatter.date).isBefore(moment().subtract(12, 'months')) &&
          <Alert colour='red' emoji='🕰️' emojiName='Mantelpiece clock emoji' title='This is an old post'>
            <p>Please note that this article was posted quite a while ago and may now be out-of-date or inaccurate.</p>
          </Alert>
        }

        <article>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
        </article>

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('100daystooffload') > -1 &&
        <>
          <p>--</p>
          <p><em>This article is part of a collection of posts involved in the <ExternalLink href="https://100daystooffload.com">#100DaysToOffload</ExternalLink> series. As such it may have been written quickly and should be considered more as a thought "dump" rather than a fully-fledged essay. Thanks for reading!</em></p>
        </>
  }

        {post.frontmatter.tags && post.frontmatter.tags.indexOf('book') > -1 &&
          <Alert colour='orange' emoji='📚' emojTitle='Pile of books emoji' title='Do you use Goodreads?'>
            <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>
          </Alert>
        }

        <Alert colour='blue' emoji='📲' emojiName='Download to phone emoji' title='Enjoyed this article? Subscribe to updates!'>
          <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>
        </Alert>
      </Layout>
    );
  }
};

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