import { graphql } from "gatsby"
import React, { FC, Fragment } from "react"
import { Header } from "../components/Header"
import { ResourcesHomeContent } from "../components/ResourcesHomeContent"
import { SEO } from "../components/SEO"
import { PageContent } from "../components/PageContent"
import useSidebar from "../hooks/useSidebar"

// @todo maybe find alternative type for data
const LanguageHome: FC<any> = ({ data, pageContext }) => {
  const { current: language } = useSidebar()
  const { relativePath } = data.file
  const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post

  const shiftLayout = Boolean(
    frontmatter.recommended_reading || frontmatter.external_resources
  )

  return (
    <Fragment>
      <SEO
        title={frontmatter.title}
        subCategory={language}
        description={excerpt}
      />
      <Header
        relativePath={relativePath}
        basePath="/resources"
        title={frontmatter.title}
        authors={fields.authors}
        createdAt={frontmatter.created_at}
        timeToRead={timeToRead}
        shifted={shiftLayout}
      />
      <PageContent
        content={
          <ResourcesHomeContent language={pageContext.language} html={html} />
        }
        recommendedReading={frontmatter.recommended_reading}
        externalResources={frontmatter.external_resources}
      />
    </Fragment>
  )
}

export default LanguageHome

export const query = graphql`
  query LanguageHome($language: String!) {
    file(
      sourceInstanceName: { eq: "resources" }
      relativeDirectory: { eq: $language }
      base: { eq: "intro.md" }
    ) {
      relativePath
      post: childMarkdownRemark {
        html
        excerpt
        fields {
          authors {
            name
            hash
            avatar
          }
        }
        frontmatter {
          created_at
          title
          recommended_reading
          external_resources {
            text
            href
          }
        }
        timeToRead
      }
    }
  }
`