import React from "react"
import { StaticQuery, graphql, navigate } from "gatsby";
import Navbar from "./navbar";
import styled from "styled-components";
import "../css/layout.css"
import "../css/typography.css"
import Header from "./header"
import { config } from "../config/config";
import CookieConsent from "react-cookie-consent";

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            menuLinks {
              name
              link
           }
          }
        }
      }
    `}
    render={data => (
      <Wrapper>
        <CookieConsent
          location="bottom"
          buttonText="Accept"
          declineButtonText="Decline"
          cookieName="gatsby-gdpr-google-analytics"
        >
          This site uses cookies to enhance the user experience.
        </CookieConsent>
        <Header />
        <Bottom>
          <Navbar menuLinks={data.site.siteMetadata.menuLinks} />
          <Content>
            {children}
          </Content>
        </Bottom>
        <Footer>
          <FooterContent>Made with ❤️ and ☕ by the <a href="https://forum.onflow.org/c/community-projects/cryptodappy/35">Flow community</a></FooterContent>
          <AffiliateLogo
            onClick={() => navigate('https://onflow.org/')}
            src={`${config.ASSETS_URL}/images/PoweredByFlow_Horizontal.png`} />
        </Footer>
      </Wrapper>
    )}
  />
)

export default Layout

const Wrapper = styled.div` 
  display: flex;
  flex-direction: column;
  height: 100%;
`
const Content = styled.div`
  margin-left: 2rem;
  max-height: calc(100vh - 10.5rem);
  overflow-y: auto;
  padding: 0 5rem;
  background: rgba(0,0,0,.2);
  flex: 1;

  @media (max-width: 700px) {
    max-height: none;
    margin-left: 0;
    background: none;
    padding: 0;
  }
`

const Bottom = styled.div`
  display: flex;
  
  @media (max-width: 700px) {
    flex-direction: column;
  }
`

const Footer = styled.div`
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-sizing: border-box;
  background: #DA4453; 
  background: -webkit-linear-gradient(to right, #89216B, #DA4453); 
  background: linear-gradient(to right, #89216B, #DA4453);

  @media (max-width: 700px) {
    position: relative;
    flex-direction: column;
    margin-top: 2rem;
  }
`

const FooterContent = styled.p`
  justify-self: start;
  padding-left: 1rem;
`

const AffiliateLogo = styled.img`
  max-width: 12rem;
  cursor: pointer;
`