text: /** @jsx jsx */
  import { jsx } from "theme-ui"
  import React from "react"
  import { Link, graphql } from "gatsby"
  import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
  import Layout from "../components/layout"
  import PostCard from "../components/post-card"
  import Seo from "../components/seo"
  
  const styles = {
    pagination: {
      a: {
        color: "muted",
        "&.is-active": {
          color: "text",
        },
        "&:hover": {
          color: "text",
        },
      },
    },
  }
  
  export const blogCategoryQuery = graphql`
    query blogCategoryQuery($skip: Int!, $limit: Int!, $category: String!) {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        filter: { frontmatter: { template: { eq: "blog-post" }, category: { eq: $category } } }
        limit: $limit
        skip: $skip
      ) {
        edges {
          node {
            id
            excerpt(pruneLength: 250)
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              slug
              title
              featuredImage {
                childImageSharp {
                  gatsbyImageData(layout: CONSTRAINED, width: 345, height: 260)
                }
              }
            }
          }
        }
      }
    }
  `
  const Pagination = props => (
    <div className="pagination" sx={styles.pagination}>
      <ul>
        {!props.isFirst && (
          <li>
            <Link to={props.prevPage} rel="prev">
              <span className="icon -left">
                <RiArrowLeftLine />
              </span>{" "}
              Previous
            </Link>
          </li>
        )}
        {Array.from({ length: props.numPages }, (_, i) => (
          <li key={`pagination-number${i + 1}`}>
            <Link
              to={`${props.blogSlug}${i === 0 ? "" : i + 1}`}
              className={props.currentPage === i + 1 ? "is-active num" : "num"}
            >
              {i + 1}
            </Link>
          </li>
        ))}
        {!props.isLast && (
          <li>
            <Link to={props.nextPage} rel="next">
              Next{" "}
              <span className="icon -right">
                <RiArrowRightLine />
              </span>
            </Link>
          </li>
        )}
      </ul>
    </div>
  )
  class BlogCategory extends React.Component {
    render() {
      const { data } = this.props
      const { currentPage, numPages, tag } = this.props.pageContext
      const blogSlug = `/blog/categories/${tag}/`
      const isFirst = currentPage === 1
      const isLast = currentPage === numPages
      const prevPage =
        currentPage - 1 === 1 ? blogSlug : blogSlug + (currentPage - 1).toString()
      const nextPage = blogSlug + (currentPage + 1).toString()
  
      const posts = data.allMarkdownRemark.edges
        .filter(edge => !!edge.node.frontmatter.date)
        .map(edge => <PostCard key={edge.node.id} data={edge.node} />)
      let props = {
        isFirst,
        prevPage,
        numPages,
        blogSlug,
        currentPage,
        isLast,
        nextPage,
      }
  
      return (
        <Layout className="blog-page">
          <Seo
            title={"Blog — Page " + currentPage + " of " + numPages}
            description={
              "Stackrole base blog page " + currentPage + " of " + numPages
            }
          />
          <h1>Tag #{tag}</h1>
          <div className="grids col-1 sm-2 lg-3">{posts}</div>
          <Pagination {...props} />
        </Layout>
      )
    }
  }
  
  export default BlogCategory
  