import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { graphql, Link, useStaticQuery } from 'gatsby';
import React, { useState } from 'react';
import BlueFCCLogo from '../assets/FCC-Nashville-blue-logo.svg';
import OrangeFCCLogo from '../assets/FCC-Nashville-orange-logo.svg';
import componentStyles from './header.module.css';
import MobileNavbar from './mobile-navbar';

function Header() {
  const [isExpanded, toggleExpansion] = useState(false);
  const { site } = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  const navbarLinks = [
    {
      route: `/`,
      title: `Home`,
    },
    {
      route: `/about`,
      title: `About`,
    },
    {
      route: `/code-of-conduct`,
      title: `Code Of Conduct`,
    },
  ];
  const currentPathname =
    typeof window !== `undefined` ? window.location.pathname : '/';
  const logo = path => {
    if (path !== '/')
      return (
        <OrangeFCCLogo
          className={`${componentStyles.logo} ${componentStyles.logoOrange}`}
          alt={`${site.siteMetadata.title} Orange Logo`}
        />
      );
    return (
      <BlueFCCLogo
        className={`${componentStyles.logo} ${componentStyles.logoBlue}`}
        alt={`${site.siteMetadata.title} Blue Logo`}
      />
    );
  };

  return (
    <header className="bg-white">
      <div className={componentStyles.navBar}>
        <Link to="/">
          <span className="sr-only">Go to homepage</span>
          {logo(currentPathname)}
        </Link>

        <button
          className={`${componentStyles.navMenuButton} relative`}
          onClick={() => toggleExpansion(!isExpanded)}
        >
          <span className="sr-only">
            {isExpanded ? 'Close menu' : 'Open menu'}
          </span>
          <FontAwesomeIcon
            icon={faTimes}
            size="2x"
            className={`${componentStyles.timesIcon} ${
              isExpanded ? `${componentStyles.isExpanded}` : ``
            } fill-current text-white`}
          />
          <FontAwesomeIcon
            icon={faBars}
            size="2x"
            className={`${componentStyles.barsIcon} ${
              isExpanded ? `${componentStyles.isExpanded}` : ``
            } fill-current text-gray-700`}
          />
        </button>

        <MobileNavbar navbarLinks={navbarLinks} isExpanded={isExpanded} />

        <nav className={componentStyles.navMenu}>
          {navbarLinks.map(link => (
            <Link
              className={componentStyles.navMenuItems}
              key={link.title}
              to={link.route}
            >
              {link.title}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}

export default Header;