text: import React, { Component } from 'react';
  import { CSSTransition, TransitionGroup } from 'react-transition-group';
  import PropTypes from 'prop-types';
  import AnchorLink from 'react-anchor-link-smooth-scroll';
  import { Link } from 'gatsby';
  import { throttle } from '../utils';
  import { IconGithub, IconLinkedin, IconInstagram, IconTwitter } from './icons';
  
  import config from '../config';
  
  import Menu from '../components/menu';
  import { IconLogo } from './icons';
  
  import styled from 'styled-components';
  import { theme, mixins, media, Nav, Ol, A } from '../style';
  
  const HeaderContainer = styled.header`
    ${mixins.flexBetween};
    position: fixed;
    top: 0;
    padding: 0px 50px;
    background-color: transparent;
    transition: ${theme.transition};
    z-index: 11;
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    width: 100%;
    height: ${props =>
      props.scrollDirection === 'none' ? theme.headerHeight : theme.headerScrollHeight};
    transform: translateY(
      ${props => (props.scrollDirection === 'down' ? `-${theme.headerScrollHeight}` : '0px')}
    );
    ${media.desktop`padding: 0 40px;`};
    ${media.tablet`padding: 0 25px;`};
  `;
  const Navbar = styled(Nav)`
    ${mixins.flexBetween};
    font-family: ${theme.fonts.SFMono};
    width: 100%;
    color: ${theme.colors.lightestSlate};
    counter-reset: item 0;
    position: relative;
    z-index: 12;
  `;
  const Logo = styled.div`
    ${mixins.flexCenter};
  `;
  const LogoLink = styled(Link)`
    color: ${theme.colors.green};
    height: 42px;
    &:hover,
    &:focus {
      svg {
        fill: ${theme.colors.transGreen};
      }
    }
    svg {
      fill: none;
      transition: ${theme.transition};
      user-select: none;
    }
  `;
  const Hamburger = styled.div`
    ${mixins.flexCenter};
    overflow: visible;
    margin: 0 -12px 0 0;
    padding: 15px;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property: opacity, filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
    display: none;
    ${media.tablet`display: flex;`};
  `;
  const HamburgerBox = styled.div`
    position: relative;
    display: inline-block;
    width: ${theme.hamburgerWidth}px;
    height: 24px;
  `;
  const HamburgerInner = styled.div`
    background-color: ${theme.colors.green};
    position: absolute;
    width: ${theme.hamburgerWidth}px;
    height: 2px;
    border-radius: ${theme.borderRadius};
    top: 50%;
    left: 0;
    right: 0;
    transition-duration: 0.22s;
    transition-property: transform;
    transition-delay: ${props => (props.menuOpen ? `0.12s` : `0s`)};
    transform: rotate(${props => (props.menuOpen ? `225deg` : `0deg`)});
    transition-timing-function: cubic-bezier(
      ${props => (props.menuOpen ? `0.215, 0.61, 0.355, 1` : `0.55, 0.055, 0.675, 0.19`)}
    );
    &:before,
    &:after {
      content: '';
      display: block;
      background-color: ${theme.colors.green};
      position: absolute;
      left: auto;
      right: 0;
      width: ${theme.hamburgerWidth}px;
      height: 2px;
      transition-timing-function: ease;
      transition-duration: 0.15s;
      transition-property: transform;
      border-radius: 4px;
    }
    &:before {
      width: ${props => (props.menuOpen ? `100%` : `120%`)};
      top: ${props => (props.menuOpen ? `0` : `-10px`)};
      opacity: ${props => (props.menuOpen ? 0 : 1)};
      transition: ${props => (props.menuOpen ? theme.hamBeforeActive : theme.hamBefore)};
    }
    &:after {
      width: ${props => (props.menuOpen ? `100%` : `80%`)};
      bottom: ${props => (props.menuOpen ? `0` : `-10px`)};
      transform: rotate(${props => (props.menuOpen ? `-90deg` : `0`)});
      transition: ${props => (props.menuOpen ? theme.hamAfterActive : theme.hamAfter)};
    }
  `;
  const NavLinks = styled.div`
    display: flex;
    align-items: center;
    ${media.tablet`display: none;`};
  `;
  const NavList = styled(Ol)`
    div {
      ${mixins.flexBetween};
    }
  `;
  const NavListItem = styled.li`
    margin: 0 10px;
    position: relative;
    font-size: ${theme.fontSizes.smallish};
  `;
  const NavLink = styled(Link)`
    ${mixins.link};
    padding: 12px 10px;
  `;
  const ResumeButton = styled.div``;
  const ResumeLink = styled(A)`
    ${mixins.smallButton};
    margin-left: 10px;
    font-size: ${theme.fontSizes.smallish};
  `;
  const SocialLink = styled(A)`
    padding: 10px;
    svg {
      width: 18px;
      height: 18px;
    }
  `;
  
  const DELTA = 5;
  
  class Header extends Component {
    static propTypes = {
      location: PropTypes.object,
      navLinks: PropTypes.array.isRequired,
    };
  
    state = {
      lastScrollTop: 0,
      scrollDirection: 'none',
      menuOpen: false,
      show: true,
    };
  
    componentDidMount() {
      window.addEventListener('scroll', () => throttle(this.handleScroll()));
      window.addEventListener('resize', () => throttle(this.handleResize()));
      window.addEventListener('keydown', evt => {
        const { menuOpen } = this.state;
        if (!menuOpen) {
          return;
        }
        if (evt.key === 'Escape' || evt.key === 'Esc') {
          this.toggleMenu();
        }
      });
  
      setTimeout(() => this.setState({ show: true }), 100);
    }
  
    componentWillUnmount() {
      window.removeEventListener('scroll', () => this.handleScroll());
      window.removeEventListener('resize', () => this.handleResize());
    }
  
    handleScroll = () => {
      const { lastScrollTop, menuOpen, scrollDirection } = this.state;
      const fromTop = window.scrollY;
      const headerHeight = config.headerHeight;
  
      // Make sure they scroll more than DELTA
      if (Math.abs(lastScrollTop - fromTop) <= DELTA || menuOpen) {
        return;
      }
  
      if (fromTop < DELTA) {
        this.setState({ scrollDirection: 'none' });
      } else if (fromTop > lastScrollTop && fromTop > headerHeight) {
        if (scrollDirection !== 'down') {
          this.setState({ scrollDirection: 'up' });
        }
      } else if (fromTop + window.innerHeight < document.body.scrollHeight) {
        if (scrollDirection !== 'up') {
          this.setState({ scrollDirection: 'up' });
        }
      }
  
      this.setState({ lastScrollTop: fromTop });
    };
  
    handleResize = () => {
      const { menuOpen } = this.state;
  
      if (window.innerWidth > 768 && menuOpen) {
        this.toggleMenu();
      }
    };
  
    toggleMenu = () => {
      const { menuOpen } = this.state;
      this.setState({ menuOpen: !menuOpen });
      document.body.style.overflow = `${menuOpen ? 'auto' : 'hidden'}`;
      document.body.classList.toggle('blur');
    };
  
    handleMenuClick = e => {
      const target = e.target;
      const isLink = target.hasAttribute('href');
      const isContainer = target.classList ? target.classList[0].includes('MenuContainer') : false;
  
      if (isLink || isContainer) {
        this.toggleMenu();
      }
    };
  
    render() {
      const { scrollDirection, menuOpen, show } = this.state;
      const { location, navLinks, avatar, hideLogo } = this.props;
      const isHome = location && location.pathname === '/';
  
      return (
        <HeaderContainer innerRef={el => (this.header = el)} scrollDirection={scrollDirection}>
          <Navbar>
            <TransitionGroup>
              {show && !hideLogo && (
                <CSSTransition classNames="fade" timeout={3000}>
                  <Logo>
                    <LogoLink to="/" aria-label="Home">
                      <IconLogo avatar={avatar} />
                    </LogoLink>
                  </Logo>
                </CSSTransition>
              )}
            </TransitionGroup>
  
            <TransitionGroup>
              {show && (
                <CSSTransition classNames="fade" timeout={3000}>
                  <Hamburger onClick={this.toggleMenu}>
                    <HamburgerBox>
                      <HamburgerInner menuOpen={menuOpen} />
                    </HamburgerBox>
                  </Hamburger>
                </CSSTransition>
              )}
            </TransitionGroup>
  
            <NavLinks>
              <NavList>
                <TransitionGroup>
                  {show &&
                    navLinks &&
                    navLinks.map((link, i) => (
                      <CSSTransition key={i} classNames="fadedown" timeout={3000}>
                        <NavListItem key={i} style={{ transitionDelay: `${i * 100}ms` }}>
                          <SocialLink
                            href={link.url}
                            target="_blank"
                            rel="nofollow noopener noreferrer"
                            aria-label={link.name}>
                            {link.name === 'Github' ? (
                              <IconGithub />
                            ) : link.name === 'Linkedin' ? (
                              <IconLinkedin />
                            ) : link.name === 'Instagram' ? (
                              <IconInstagram />
                            ) : link.name === 'Twitter' ? (
                              <IconTwitter />
                            ) : (
                              <IconGithub />
                            )}
                          </SocialLink>
                        </NavListItem>
                      </CSSTransition>
                    ))}
                </TransitionGroup>
              </NavList>
            </NavLinks>
          </Navbar>
  
          <Menu
            isHome={isHome}
            navLinks={navLinks}
            menuOpen={menuOpen}
            handleMenuClick={e => this.handleMenuClick(e)}
          />
        </HeaderContainer>
      );
    }
  }
  
  export default Header;
  