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 } from '@fortawesome/free-solid-svg-icons'

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

export default class Note extends React.Component {

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

        <h1>{note.frontmatter.title}</h1>
        <h4>Last updated {moment(note.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(note.frontmatter.date).fromNow()})</small></i>
        {note.frontmatter.tags && note.frontmatter.tags.map(tag => <Tag key={tag} tag={tag} />)}
        </h4>

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

        <article>
          <div dangerouslySetInnerHTML={{ __html: note.html }} />
        </article>
      </Layout>
    );
  }
};

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