import { useState, useContext, FunctionComponent, useRef } from 'react'
import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import theme from '../../styles/theme'
import { useOnClickOutside } from '../../lib/onClickOutside'

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

  return (
    <>
      <li>
        <a
          onClick={(event) => {
            event.preventDefault()
            setMenu(!menu)
          }}
        >
          <FontAwesomeIcon icon={faSearch} />
          Search
        </a>

        {menu ? (
          <section className='searchmenu'>
            <input type='search' placeholder='Search text' />
          </section>
        ) : null}
      </li>

      <style jsx>{`
        .searchmenu {
          position: absolute;
          padding: 1em 0.3em;
          right: 0;
          top: 100%;

          color: ${theme.colors.mobileNav};
          background-color: ${theme.colors.mobileNavBackground};
          align-content: end;
        }
        .searchmenu :global(a) {
          color: ${theme.colors.mobileNav};
        }

        @media (min-width: ${theme.fullsize}) {
          .searchmenu {
            width: 100%;
            padding: 1em;
          }
        }
      `}</style>
    </>
  )
}

export default Search
