import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCalendarAlt, faSearch } from '@fortawesome/free-solid-svg-icons'

import theme from '../../styles/theme'
import UserNav from '../../user/components/UserNav'
import { useState, useRef, RefObject } from 'react'
import { useOnClickOutside } from '../../lib/onClickOutside'
import Search from './Search'

const Nav = () => {
  const [menu, setMenu] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  useOnClickOutside(ref, () => {
    setMenu(false)
  })

  return (
    <div ref={ref}>
      <input
        type='checkbox'
        id='nav-toggle'
        checked={menu}
        onChange={() => setMenu(!menu)}
        className='nav-toggle'
      />
      <label htmlFor='nav-toggle' className='nav-toggle-label'>
        <span></span>
      </label>
      <nav>
        <ul>
          <li>
            <Link href='/training'>
              <a>
                <FontAwesomeIcon icon={faCalendarAlt} />
                Archive
              </a>
            </Link>
          </li>
          <Search />
          <UserNav />
        </ul>
      </nav>

      <style jsx>{`
        nav {
          max-height: 0;
          overflow: hidden;
          transition: max-height 400ms ease-in-out;
          position: absolute;
          text-align: left;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: ${theme.colors.mobileNavBackground};
          align-content: end;
        }

        .nav-toggle:checked ~ nav {
          max-height: 100vh;
        }

        nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }

        nav :global(li) {
          margin: 0 0.2em;
          padding: 0.6em 1.5em;
          border-bottom: 1px solid #696969e7;
        }

        nav :global(svg) {
          width: 0.8em;
          margin-right: 0.7em;
        }

        nav :global(a) {
          color: ${theme.colors.mobileNav};
          text-decoration: none;
          font-size: 1.2rem;
          text-transform: uppercase;
        }

        nav :global(form input),
        nav :global(form select),
        nav :global(form text) {
          border: 2px solid ${theme.colors.white}00;
          color: ${theme.colors.white};
          background-color: ${theme.colors.white}22;
          transition: all 250ms ease-in-out;
        }

        nav :global(form input:focus),
        nav :global(form select:focus),
        nav :global(form text:focus) {
          color: ${theme.colors.black};
          background-color: ${theme.colors.white}bb;
          border-bottom: 2px solid ${theme.colors.white}22;
        }

        .nav-toggle {
          display: none;
        }

        .nav-toggle-label {
          position: absolute;
          top: 0;
          left: 0;
          margin-left: 1em;
          height: 100%;
          display: flex;
          align-items: center;
        }

        .nav-toggle-label span {
          display: grid;
          align-items: center;
          border: 2px solid #5d6a6bff;
          transition: all 400ms ease-in-out;
          height: 4px;
          width: 2em;
          border-radius: 2px;
          margin: 0;
          padding: 0;
        }
        .nav-toggle-label span::before,
        .nav-toggle-label span::after {
          content: '';
          height: 4px;
          background-color: #5d6a6bff;
          border-radius: 2px;
          position: absolute;
          left: 0.2em;
          right: 0.2em;
          transform: rotate(0deg);
          transition: all 200ms ease-in-out 200ms;
        }
        .nav-toggle-label span::before {
          transform: translate(0, -8px);
        }
        .nav-toggle-label span::after {
          transform: translate(0, 8px);
        }

        .nav-toggle:checked ~ .nav-toggle-label span {
          height: 2em;
          width: 2em;
          background-color: #5d6a6b00;
          border: 2px solid #5d6a6b55;
          border-radius: 0px;
        }

        .nav-toggle:checked ~ .nav-toggle-label span::before {
          transform: rotate(45deg) translate(0);
        }

        .nav-toggle:checked ~ .nav-toggle-label span::after {
          transform: rotate(-45deg) translate(0);
        }

        @media screen and (min-width: ${theme.fullsize}) {
          .nav-toggle-label {
            display: none;
          }
          nav {
            all: unset;
            height: 100%;
            display: flex;
            position: relative;
            align-items: center;
            justify-content: flex-end;
          }

          nav :global(li) {
            display: inline-block;
            border-bottom: none;
            text-align: center;
          }

          nav :global(li::after) {
            content: '';
            display: block;
            height: 3px;
            left: 10%;
            right: 10%;
            transform: scale(0, 1);
            transition: all 300ms ease-in-out;
            margin-top: 0.4em;
            background-color: ${theme.colors.links};
          }

          nav :global(li:hover::after) {
            background-color: ${theme.colors.linksHighlight};
            transform: scale(1, 1);
          }

          nav :global(a) {
            color: ${theme.colors.links};
          }

          nav :global(a:hover) {
            color: ${theme.colors.linksHighlight};
          }
        }
      `}</style>
    </div>
  )
}

export default Nav
