import React from "react"
import { StaticQuery, graphql, Link } from "gatsby"
import styled from "styled-components"
import { Flex } from "@rebass/grid"

const PrevNext = props => {
  const { data, slug, category } = props
  const getAllPages = data.allMarkdownRemark.edges
  const pages = getAllPages
    .filter(page => page.node.frontmatter.category === category)
    .sort((a, b) =>
      a.node.frontmatter.title > b.node.frontmatter.title
        ? 1
        : b.node.frontmatter.title > a.node.frontmatter.title
        ? -1
        : 0
    )
  const activePage = pages.findIndex(page => page.node.fields.slug === slug)
  const prev = activePage !== 0
  const next = activePage < pages.length - 1
  return (
    <Buttons
      as="ul"
      alignItems="center"
      justifyContent="center"
      px={[3, 4]}
      py={[3, 4]}
      mt={0}
    >
      {prev && (
        <Button type="previous" to={pages[activePage - 1].node.fields.slug}>
          <SubHeading>Prev</SubHeading>
          <Title>{pages[activePage - 1].node.frontmatter.title}</Title>
        </Button>
      )}
      {next && (
        <Button type="next" to={pages[activePage + 1].node.fields.slug}>
          <SubHeading>Next</SubHeading>
          <Title>{pages[activePage + 1].node.frontmatter.title}</Title>
        </Button>
      )}
    </Buttons>
  )
}

export default props => {
  return (
    <StaticQuery
      query={query}
      render={data => (
        <PrevNext data={data} slug={props.slug} category={props.category} />
      )}
    />
  )
}

const query = graphql`
  query {
    allMarkdownRemark(
      sort: { order: ASC, fields: [frontmatter___title] }
      limit: 1000
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            category
          }
        }
      }
    }
  }
`