text: /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid*/
  
  import React, { useState } from "react";
  import PropTypes from "prop-types";
  import { Link } from "gatsby";
  import { StaticQuery, graphql } from "gatsby";
  import { HelmetDatoCms } from "gatsby-source-datocms";
  import { Router } from "@reach/router";
  import { login, logout, isAuthenticated, getProfile } from "../utils/auth";
  import  "../../node_modules/bootstrap-4-required"
  
  import "../styles/index.sass";
  
  const TemplateWrapper = ({ children }) => {
    const [showMenu, setShowMenu] = useState(false);
    const user = getProfile()
    console.log(user)
    return (
      <StaticQuery
        query={graphql`
          query LayoutQuery {
            datoCmsSite {
              globalSeo {
                siteName
              }
              faviconMetaTags {
                ...GatsbyDatoCmsFaviconMetaTags
              }
            }
            datoCmsHome {
              seoMetaTags {
                ...GatsbyDatoCmsSeoMetaTags
              }
              introTextNode {
                childMarkdownRemark {
                  html
                }
              }
              copyright
            }
            allDatoCmsSocialProfile(sort: { fields: [position], order: ASC }) {
              edges {
                node {
                  profileType
                  url
                }
              }
            }
          }
        `}
        render={(data) => (
          <>
            <nav id="mainNav">
              <div className="container">
                <Link id="navBranding" to="/">
                  SPORTS-PROFILES.X{" "}
                </Link>
                <div className="ml-auto links">
                  <Link to="/account">{isAuthenticated() ? 'Home' : 'Log in'}</Link>
                  <a
                    className={!isAuthenticated() ? 'd-none': null }
                    href="#logout"
                    onClick={(e) => {
                      logout();
                      e.preventDefault();
                    }}
                  >
                    Log Out ({user.name})
                  </a>
                </div>
              </div>
            </nav>
  
            <div className={`container ${showMenu ? "is-open" : ""}`}>
              <HelmetDatoCms
                favicon={data.datoCmsSite.faviconMetaTags}
                seo={data.datoCmsHome.seoMetaTags}
              />
  
              <main className="container__body">{children}</main>
            </div>
          </>
        )}
      />
    );
  };
  
  TemplateWrapper.propTypes = {
    children: PropTypes.object
  };
  
  export default TemplateWrapper;
  /* eslint-enable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid*/
  