import React, { Component } from 'react';
import { Global, css } from '@emotion/core';
import { StaticQuery, graphql } from 'gatsby';

import CheckoutHeader from './components/header';
import GlobalHeaderTags from 'components/global-header-tags';
import { SiteTheme } from 'lib';

import { CheckoutLayoutQuery, CheckoutLayoutProps } from './checkout-layout.types';
import * as Styles from './checkout-layout.styles';
import { ShowOnLarge, ShowOnTabletDown } from 'utils/styles/display';

class CheckoutLayout extends Component<CheckoutLayoutProps> {
  render(): JSX.Element {
    return (
      <StaticQuery
        query={graphql`
          query ThemeBackgroundQuery {
            siteConfig {
              id
              siteTitle
              _seoMetaTags {
                tagName
                content
                attributes {
                  property
                  content
                  name
                }
              }
              theme {
                siteBackgroundColour {
                  key
                }
              }
            }
          }
        `}
        render={(data: CheckoutLayoutQuery): JSX.Element => {
          const { theme, _seoMetaTags, siteTitle } = data.siteConfig;
          const backgroundColour = SiteTheme.setColour(theme.siteBackgroundColour, 'white');

          return (
            <>
              <GlobalHeaderTags
                metaTags={{tags: _seoMetaTags}}
                siteTitle={siteTitle}
              />
              <Global
                styles={css`
                  body {
                    background: ${backgroundColour};
                  }
                `}
              />
              <Styles.FullHeightContainer>
                <CheckoutHeader />
                {this.props.children}
              </Styles.FullHeightContainer>
            </>
          );
        }}
      />
    );
  }
}

export default CheckoutLayout;