import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
import system from 'system-components'
import Header from '../components/Header'
import { Flex } from '../components/Primitives'
import { Title } from '../components/Typography'
import { themeHover } from '../utils/styles'
import { dependencies } from '../../package-lock.json'

const Section = system(
  {
    is: 'section',
  },
  'space'
)

const SectionTitle = system({
  is: 'h2',
  fontSize: [3, 4],
  my: 0,
})

const Dep = system({
  is: 'p',
  display: 'flex',
  alignItems: 'center',
  mt: 3,
  mb: 0,
})

const DepLink = system(
  {
    is: 'a',
    fontSize: [2, 3],
    fontWeight: 6,
  },
  themeHover
)

const DepVer = system({
  is: 'span',
  fontFamily: 'monospace',
  ml: 3,
})

const SanityCheck = system({
  is: 'p',
  mt: 3,
  mb: 0,
  fontSize: [2, 3],
  fontWeight: 6,
})

const ColophonPage = () => {
  const data = useStaticQuery(graphql`
    query ColophonQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  const {
    react: { version: react },
    gatsby: { version: gatsby },
    'react-helmet': { version: helmet },
    'sanitize.css': { version: sanitize },
    'styled-components': { version: styledComponents },
    'system-components': { version: systemComponents },
    eslint: { version: eslint },
    prettier: { version: prettier },
    husky: { version: husky },
    'lint-staged': { version: lintStaged },
  } = dependencies

  return (
    <>
      <Helmet>
        <title>Colophon • {data.site.siteMetadata.title}</title>
      </Helmet>

      <article>
        <Header>
          <Title>Building Blocks</Title>
        </Header>

        <Flex is="main" flexDirection={['column', 'column', 'row']}>
          <Section mr={[0, 0, 6]}>
            <SectionTitle>Functionality</SectionTitle>

            <Dep mt={4}>
              <DepLink href="https://reactjs.org">React</DepLink>{' '}
              <DepVer>{react}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://gatsbyjs.org">Gatsby</DepLink>{' '}
              <DepVer>{gatsby}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://github.com/nfl/react-helmet">
                React Helmet
              </DepLink>{' '}
              <DepVer>{helmet}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://csstools.github.io/sanitize.css/">
                sanitize.css
              </DepLink>{' '}
              <DepVer>{sanitize}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://styled-components.com/">
                styled-components
              </DepLink>{' '}
              <DepVer>{styledComponents}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://github.com/jxnblk/styled-system/tree/master/system-components">
                system-components
              </DepLink>{' '}
              <DepVer>{systemComponents}</DepVer>
            </Dep>
          </Section>

          <Section mt={[5, 5, 0]} mr={[0, 0, 6]}>
            <SectionTitle>Infrastructure</SectionTitle>

            <Dep mt={4}>
              <DepLink href="https://netlify.com">Netlify</DepLink>
            </Dep>

            <Dep>
              <DepLink href="https://github.com">GitHub</DepLink>
            </Dep>

            <Dep>
              <DepLink href="https://get.gaug.es">Gauges</DepLink>
            </Dep>

            <Dep>
              <DepLink href="https://eslint.org/">ESLint</DepLink>{' '}
              <DepVer>{eslint}</DepVer>
            </Dep>

            <Dep>
              <DepLink href="https://prettier.io/">Prettier</DepLink>{' '}
              <DepVer>{prettier}</DepVer>
            </Dep>
          </Section>

          <Section mt={[5, 5, 0]}>
            <SectionTitle>Sanity</SectionTitle>

            <SanityCheck mt={4}>Music</SanityCheck>

            <SanityCheck>Coffee</SanityCheck>

            <SanityCheck>Beer</SanityCheck>

            <SanityCheck>Burritos</SanityCheck>

            <SanityCheck>Skateboarding</SanityCheck>

            <SanityCheck>Basketball</SanityCheck>
          </Section>
        </Flex>
      </article>
    </>
  )
}

export default ColophonPage

@@ -1418,83 +1418,8 @@
  %7D,%0A
-    husky: %7B version: husky %7D,%0A    'lint-staged': %7B version: lintStaged %7D,%0A
   %7D 

remove extra dependency version variables