import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import React from "react"
import {
  ArticleListItem,
  ArticleListItemData,
} from "../../components/ArticleListItem"
import Layout from "../../components/layout"
import SEO from "../../components/seo"
import Bio from "../../components/bio"

type Props = {
  data: {
    mdx: {
      body: string
    } | null
    allMdx: {
      edges: Array<{
        node: ArticleListItemData
      }>
    }
  }
  pageContext: {
    tag: string
    slug: string
  }
}

const TagPageTemplate: React.FC<Props> = ({ data, pageContext }) => {
  const tagDescBody = data.mdx?.body
  const posts = data.allMdx.edges
  const { tag, slug } = pageContext

  const title = `タグ: ${tag}`
  return (
    <Layout title={title} slug={slug} rightSide={<Bio />}>
      <SEO title={title} />
      <h1>
        <FontAwesomeIcon icon="tags" aria-label="タグ" />
        {tag}
      </h1>
      {tagDescBody && (
        <>
          <main>
            <MDXRenderer>{tagDescBody}</MDXRenderer>
          </main>
          <hr />
        </>
      )}
      {posts.map(({ node }) => {
        return <ArticleListItem key={node.fields.slug} {...node} />
      })}
    </Layout>
  )
}

export default TagPageTemplate

export const pageQuery = graphql`
  query($tag: String, $slug: String) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
    }
    allMdx(
      sort: { fields: [frontmatter___published], order: DESC }
      filter: {
        frontmatter: { tags: { in: [$tag] } }
        fields: { sourceFileType: { eq: "blog" } }
      }
    ) {
      edges {
        node {
          ...ArticleInList
        }
      }
    }
  }
`