{"size": 3008, "ext": "js", "max_stars_repo_path": "src/components/layout.js", "max_stars_repo_name": "ghettosunrise/strela", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout.js", "max_issues_repo_name": "ghettosunrise/strela", "max_issues_repo_issues_event_min_datetime": "2022-02-15T00:07:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T22:53:34.000Z", "max_forks_repo_path": "src/components/layout.js", "max_forks_repo_name": "ghettosunrise/strela", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 25.9310344828, "max_line_length": 67, "alphanum_fraction": 0.5930851064}
/* eslint-disable react/jsx-filename-extension */
/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import AgencyHeader from '../containers/AgencyHeader';
import { useAnimationStatus } from '../hooks/useAnimationStatus';
import { ProvideLanguage } from '../hooks';

import '../assets/layout.css';
import Flex from '../styled/flex';
import Header from '../containers/Header';
import Form from '../containers/BookingForm';
import Footer from '../containers/Footer';
import Contact from '../containers/ContactUs';
import MobileMenu from '../containers/MobileMenu';
import BookingHeader from '../containers/BookingHeader';
import { AnimatedBlock } from './Animations';

// const window = document.documentElement.clientWidth;

const Layout = ({
  children,
  setIsClosed,
  isClosed,
  setIsClosedMobile,
  isClosedMobile,
  booking,
  page,
  main,
}) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  const [documentLoaded, setDocumentLoaded] = useState(null);
  let window;
  useEffect(() => {
    setDocumentLoaded(true);
  }, []);

  documentLoaded === true
    ? (window = document.documentElement.clientWidth)
    : null;

  return (
    // <ProvideLanguage>
    <Flex width="100%" background={booking ? '#FFF' : null}>
      {booking && (
        <>
          <BookingHeader
            setIsClosed={setIsClosed}
            setIsClosedMobile={setIsClosedMobile}
            isClosedMobile={isClosedMobile}
            siteTitle={data.site.siteMetadata.title}
          />
          <Form isClosed={isClosed} setIsClosed={setIsClosed} />
          <>{children}</>
          <Footer booking="true" />
        </>
      )}
      {!booking && (
        <>
          {!main && (
            <Header
              setIsClosed={setIsClosed}
              setIsClosedMobile={setIsClosedMobile}
              isClosedMobile={isClosedMobile}
              siteTitle={data.site.siteMetadata.title}
              page={page}
            />
          )}
          {main && (
            <AgencyHeader
              isClosed={isClosed}
              setIsClosed={setIsClosed}
              isClosedMobile={isClosedMobile}
              setIsClosedMobile={setIsClosedMobile}
            />
          )}
          <Contact isClosed={isClosed} setIsClosed={setIsClosed} />
          <MobileMenu
            isClosedMobile={isClosedMobile}
            setIsClosedMobile={setIsClosedMobile}
          />
          <main>{children}</main>
          <Footer agency="true" />
        </>
      )}
      {/* {!booking && main && (

      )} */}
    </Flex>

    // </ProvideLanguage>
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;
