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

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

const StyledHeader = styled.h2`
  display: flex;
  justify-content: space-between;
`;

export default class Blog extends React.Component {

  render() {
    return (
      <Layout>
        <Helmet title='Blog'>
          <meta name="description" content="Blog post entries and articles" />
        </Helmet>
        <StyledHeader>
          <span>Blog posts</span>
          <small>
            <FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link>
          </small>
        </StyledHeader>
        {this.props.data.allMarkdownRemark.edges.map(({ node }) => {
          if (node.fields.slug.includes('/blog/')) {
            return <BlogPostHeader key={node.fields.slug} post={node} />;
          } else return null;
        })}

      </Layout>
    );
  }
}

export const query = graphql`
  query IndexQuery {
   	allMarkdownRemark(sort: {fields: [fileAbsolutePath], order: DESC}){
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date
            tags
          }
          excerpt
          fields {
            slug
          }
        }
      }
    }
  }
`;
