import React from 'react'
import PropTypes from 'prop-types'
import { useStaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
import styled, { createGlobalStyle, withTheme } from 'styled-components'
import { circuitBoard } from 'hero-patterns'
import { Box, Flex } from '../components/Primitives'
import Navigation from '../components/Navigation'
import Footer from '../components/Footer'

import 'sanitize.css'

const GlobalStyles = createGlobalStyle`
  html {
    background-color: ${({ theme }) => theme.colors.orange};
    background-image: ${({ theme }) => circuitBoard(theme.colors.white)};
    background-position: center top;
    background-size: 456px;
    background-repeat: repeat;
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }

    @media (min-width: ${({ theme }) => theme.breakpoints[0]}) {
      background-size: 604px;
    }

    @media print {
      background: none;
    }
  }

  ::selection {
    background-color: ${({ theme }) => theme.colors.orange} !important;
    color: ${({ theme }) => theme.colors.darkGrey} !important;
  }

  a {
    color: inherit;
    text-decoration: none;
    text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
  }

  @media print {
    nav, footer {
      display: none !important;
    }

    #main-content {
      margin-bottom: 0 !important;
    }
  }
`

const Border = styled(Box)`
  display: grid;
  grid-template-areas:
    'border-top border-top border-top'
    'border-left content border-right'
    'border-bottom border-bottom border-bottom';
  grid-template-rows:
    ${({ theme }) => theme.space[2]}
    1fr
    ${({ theme }) => theme.space[2]};
  grid-template-columns:
    ${({ theme }) => theme.space[2]}
    minmax(0, 1fr)
    ${({ theme }) => theme.space[2]};
  min-height: 100vh;

  @media (min-width: ${({ theme }) => theme.breakpoints[0]}) {
    grid-template-rows:
      ${({ theme }) => theme.space[3]}
      1fr
      ${({ theme }) => theme.space[3]};
    grid-template-columns:
      ${({ theme }) => theme.space[3]}
      minmax(0, 1fr)
      ${({ theme }) => theme.space[3]};
  }

  @media print {
    display: block;
    min-height: 0;
    background: transparent;
  }
`

const Content = styled(Box)`
  grid-area: content;
  background-color: ${({ theme }) => theme.colors.white};
`

const Constraint = styled(Flex)`
  flex-flow: column nowrap;
  max-width: 64rem;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
`

const Layout = ({ children, location, theme }) => {
  const data = useStaticQuery(graphql`
    query LayoutQuery {
      site {
        siteMetadata {
          title
          description
          siteUrl
        }
      }
    }
  `)

  return (
    <>
      <Helmet htmlAttributes={{ lang: 'en' }}>
        <title>{data.site.siteMetadata.title}</title>

        <meta name="description" content={data.site.siteMetadata.description} />

        <meta name="theme-color" content={theme.colors.nearWhite} />

        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          href="/favicon-32x32.png"
          sizes="32x32"
        />
        <link
          rel="icon"
          type="image/png"
          href="/favicon-16x16.png"
          sizes="16x16"
        />

        <link rel="manifest" href="/manifest.json" />
        <link
          rel="mask-icon"
          href="/safari-pinned-tab.svg"
          color={theme.colors.orange}
        />
      </Helmet>

      <GlobalStyles />

      <Border>
        <Content
          color="darkGrey"
          py={3}
          px={[3, 4]}
          borderRadius={2}
          fontFamily="sans-serif"
        >
          <Constraint>
            <Navigation location={location} />

            <Box is="main" id="main-content" mb={[5, 6]}>
              {children}
            </Box>

            <Footer />
          </Constraint>
        </Content>
      </Border>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
}

export default withTheme(Layout)

@@ -214,53 +214,8 @@
 ts'%0A
-import %7B circuitBoard %7D from 'hero-patterns'%0A
 impo
@@ -493,178 +493,8 @@
 e%7D;%0A
-    background-image: $%7B(%7B theme %7D) =%3E circuitBoard(theme.colors.white)%7D;%0A    background-position: center top;%0A    background-size: 456px;%0A    background-repeat: repeat;%0A
     
@@ -605,110 +605,8 @@
  %7D%0A%0A
-    @media (min-width: $%7B(%7B theme %7D) =%3E theme.breakpoints%5B0%5D%7D) %7B%0A      background-size: 604px;%0A    %7D%0A%0A
     
@@ -1104,733 +1104,35 @@
 led(
-Box)%60%0A  display: grid;%0A  grid-template-areas:%0A    'border-top border-top border-top'%0A    'border-left content border-right'%0A    'border-bottom border-bottom border-bottom';%0A  grid-template-rows:%0A    $%7B(%7B theme %7D) =%3E theme.space%5B2%5D%7D%0A    1fr%0A    $%7B(%7B theme %7D) =%3E theme.space%5B2%5D%7D;%0A  grid-template-columns:%0A    $%7B(%7B theme %7D) =%3E theme.space%5B2%5D%7D%0A    minmax(0, 1fr)%0A    $%7B(%7B theme %7D) =%3E theme.space%5B2%5D%7D;%0A  min-height: 100vh;%0A%0A  @media (min-width: $%7B(%7B theme %7D) =%3E theme.breakpoints%5B0%5D%7D) %7B%0A    grid-template-rows:%0A      $%7B(%7B theme %7D) =%3E theme.space%5B3%5D%7D%0A      1fr%0A      $%7B(%7B theme %7D) =%3E theme.space%5B3%5D%7D;%0A    grid-template-columns:%0A      $%7B(%7B theme %7D) =%3E theme.space%5B3%5D%7D%0A      minmax(0, 1fr)%0A      $%7B(%7B theme %7D) =%3E theme.space%5B3%5D%7D;%0A  %7D
+Flex)%60%0A  min-height: 100vh;
 %0A%0A  
@@ -1256,26 +1256,15 @@
 %60%0A  
-grid-area: content
+flex: 1
 ;%0A  
@@ -2597,24 +2597,61 @@
      %3CBorder
+ border=%7B3%7D borderColor=%22transparent%22
 %3E%0A        %3CC
@@ -2671,24 +2671,24 @@
     
-color=%22darkGrey%22
+borderRadius=%7B2%7D
 %0A   
@@ -2737,57 +2737,57 @@
     
-borderRadius=%7B2%7D%0A          fontFamily=%22sans-serif
+fontFamily=%22sans-serif%22%0A          color=%22darkGrey
 %22%0A  

remove background-image entirely