text: import { Link } from "gatsby";
  import PropTypes from "prop-types";
  import React from "react";
  import VisibilitySensor from "react-visibility-sensor";
  
  import { ScreenWidthContext, FontLoadedContext } from "../../layouts";
  import config from "../../../content/meta/config";
  import Menu from "../Menu";
  
  import avatar from "../../images/png/dadvatar.png";
  
  class Header extends React.Component {
    state = {
      fixed: false
    };
  
    visibilitySensorChange = val => {
      if (val) {
        this.setState({ fixed: false });
      } else {
        this.setState({ fixed: true });
      }
    };
  
    getHeaderSize = () => {
      const fixed = this.state.fixed ? "fixed" : "";
      const homepage = this.props.path === "/" ? "homepage" : "";
  
      return `${fixed} ${homepage}`;
    };
  
    render() {
      const { pages, path, theme } = this.props;
      const { fixed } = this.state;
  
      return (
        <React.Fragment>
          <header className={`header ${this.getHeaderSize()}`}>
            <Link to="/" className="logoType">
              <div className="logo">
                <img src="logo.svg" />
                {/* <img src={config.gravatarImgMd5=="" ? avatar : config.gravatarImgMd5 } alt={config.siteTitle} /> */}
              </div>
              {/* <div className="type">
                <h1>{config.headerTitle}</h1>
                <h2>{config.headerSubTitle}</h2>
              </div> */}
            </Link>
            {/* <FontLoadedContext.Consumer>
              {loaded => (
                <ScreenWidthContext.Consumer>
                  {width => (
                    <Menu
                      path={path}
                      fixed={fixed}
                      screenWidth={width}
                      fontLoaded={loaded}
                      pages={pages}
                      theme={theme}
                    />
                  )}
                </ScreenWidthContext.Consumer>
              )}
            </FontLoadedContext.Consumer> */}
          </header>
          <VisibilitySensor onChange={this.visibilitySensorChange}>
            <div className="sensor" />
          </VisibilitySensor>
  
          {/* --- STYLES --- */}
          <style jsx>{`
            .header {
              align-items: center;
              // justify-content: center;
              background-color: ${theme.color.neutral.white};
              display: flex;
              height: ${theme.header.height.default};
              position: relative;
              top: 0;
              width: 100%;
              align-items: center;
  
              :global(a.logoType) {
                align-items: center;
                display: flex;
                flex-direction: "column";
                color: ${theme.text.color.primary};
  
                .logo {
                  flex-shrink: 0;
                }
              }
  
              &.homepage {
                position: absolute;
                background-color: transparent;
                height: ${theme.header.height.homepage};
              }
            }
  
            h1 {
              font-size: ${theme.font.size.m};
              font-weight: ${theme.font.weight.standard};
              margin: ${theme.space.stack.xs};
            }
  
            h2 {
              font-weight: ${theme.font.weight.standard};
              font-size: ${theme.font.size.xxs};
              letter-spacing: 0;
              margin: 0;
            }
  
            .logo {
              display: inline-block;
              margin: ${theme.space.inline.default};
              overflow: hidden;
              // width: 44px;
              max-width: 120px;
              transition: all 0.5s;
  
              .homepage & {
                width: 200px;
                height: auto;
                margin-top: 50px;
                max-width: none;
              }
  
              img {
                width: 100%;
              }
            }
  
            .sensor {
              display: block;
              position: absolute;
              bottom: 0;
              z-index: 1;
              left: 0;
              right: 0;
              height: 1px;
              top: ${path === "/" ? theme.header.height.homepage : theme.header.height.default};
            }
  
            @from-width tablet {
              .header {
                padding: ${theme.space.inset.l};
  
                &.homepage {
                  height: ${theme.header.height.homepage};
                }
              }
            }
  
            @below desktop {
              .header.homepage {
                .logo {
                  border: none;
                }
  
                :global(a.logoType),
                h1 {
                  color: ${theme.color.neutral.white};
                }
                h2 {
                  color: ${theme.color.neutral.gray.d};
                }
              }
            }
  
            @from-width desktop {
              .header {
                align-items: center;
                background-color: ${theme.color.neutral.white};
                display: flex;
                position: absolute;
                top: 0;
                width: 100%;
                justify-content: space-between;
                transition: padding 0.5s;
  
                &.fixed {
                  height: 74px;
                  border-bottom: 1px solid #eee;
                  background-color: ${theme.color.neutral.white};
                  left: 0;
                  box-shadow: 0 0px 9px rgba(0,0,0,.8);
                  padding: 0 ${theme.space.m};
                  position: fixed;
                  top: 0;
                  width: 100%;
                  z-index: 4;
  
                  h1 {
                    margin: ${theme.space.stack.xxs};
                  }
  
                  h2 {
                    display: none;
                  }
                }
  
                &.homepage:not(.fixed) {
                  :global(a.logoType),
                  h1 {
                    color: ${theme.color.neutral.white};
                  }
                  h2 {
                    color: ${theme.color.neutral.gray.d};
                  }
                }
              }
  
              .header :global(a.logoType) {
                text-align: left;
                flex-direction: row;
                flex-shrink: 0;
                width: auto;
              }
  
              .logo {
                margin: ${theme.space.inline.default};
  
                .fixed & {
                  height: auto;
                  width: 100px;
                  margin-top: 0;
                }
  
                .header.homepage:not(.fixed) & {
                  border: none;
                }
              }
  
              h2 {
                animation-duration: ${theme.time.duration.default};
                animation-name: h2Entry;
              }
  
              @keyframes h2Entry {
                from {
                  opacity: 0;
                }
                to {
                  opacity: 1;
                }
              }
            }
          `}</style>
        </React.Fragment>
      );
    }
  }
  
  Header.propTypes = {
    pages: PropTypes.array.isRequired,
    path: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired
  };
  
  export default Header;
  