import { useState, ChangeEvent, useRef, useEffect } from 'react'
import { useRouter } from 'next/router'

export default function SearchToolbar() {
  const router = useRouter()
  const [openSearch, setOpenSearch] = useState(false)
  const [query, setQuery] = useState('')
  const ref = useRef<HTMLInputElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

  function updateQuery(event: ChangeEvent<HTMLInputElement>) {
    setQuery(() => event?.target?.value)
  }

  function submitHandler(event: ChangeEvent<HTMLFormElement>) {
    event.preventDefault()
    setQuery(() => event?.target?.value)
    router.push(`/search-results?q=${query}`)
    setQuery('')
    setOpenSearch(false)
  }

  const handleClick = () => {
    setOpenSearch(prev => !prev)
    ref?.current?.focus()
  }

  // TODO: Might want to revisit this
  // useEffect(() => {
  //   const handlScroll = () => setOpenSearch(false)
  //   window.addEventListener('scroll', handlScroll)
  //   return () => window.removeEventListener('scroll', handlScroll)
  // }, [])

  useEffect(() => {
    const handler = (e: any) => {
      if (openSearch && containerRef.current && !containerRef.current.contains(e.target)) {
        setOpenSearch(false)
      }
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [openSearch])

  return (
    <div ref={containerRef} className="w-full">
      <button
        onClick={handleClick}
        className={`navbar-btn search-btn ${
          openSearch && 'mobile-active'
        } ml-auto md:ml-0 md:mr-0 sm:mr-[28px] w-[30px] h-[30px] md:w-[46px] md:h-[46px] md:my-[31px] my-[40px] flex items-center justify-center group`}
      >
        <div className="sr-only">Search</div>
        <span
          className="
          inline-block
          group-hover:bg-black
          group-hover:border-white
          group-hover:after:bg-white
          bg-transparent
          rounded-[30px]
          relative
          w-[20px]
          h-[20px]
          border-[3px]
          border-white
          md:border-black
          after:bg-white
          md:after:bg-black
          after:h-[3px]
          after:w-6/12
          after:absolute
          after:bottom-[-20%]
          after:right-[-30%]
          after:rotate-[45deg]
          after:origin-bottom
          icon-magnifying-glass
          "
        ></span>
      </button>
      <div
        className={`md:absolute left-0 bg-black overflow-hidden w-full md:h-screen transition-all ease-in-out duration-150 ${
          !openSearch ? 'max-h-0' : 'max-h-[1000px]'
        }`}
      >
        <div className="sm:container">
          <div className="flex justify-between md:py-[60px] pb-[50px]">
            <div className="md:text-[65px] sm:text-[72px] text-[52px] text-white leading-none">
              What can we help you find?
            </div>
            <button
              onClick={() => setOpenSearch(prev => !prev)}
              className="
                  close
                  md:block
                  hidden
                  text-white
                  relative
                  w-[32px]
                  h-[32px]
                  after:absolute
                  after:top-0
                  after:left-[15px]
                  after:h-[33px]
                  after:w-[1px]
                  after:bg-white
                  before:absolute
                  before:top-0
                  before:left-[15px]
                  before:h-[33px]
                  before:w-[1px]
                  before:bg-white
                  after:rotate-[-45deg]
                  before:rotate-[45deg]
                  hover:after:w-[9px]
                  hover:before:w-[9px]
                  after:transition-all after:ease-in-out after:duration-150
                  before:transition-all before:ease-in-out before:duration-150"
            >
              <span className="sr-only">Close</span>
            </button>
          </div>
          <form action="" onSubmit={submitHandler} className="relative">
            <input
              ref={ref}
              onChange={updateQuery}
              value={query}
              type="text"
              placeholder="I'm looking for..."
              className="text-xl text-white font-light w-full border-t-0 border-l-0 border-r-0 border-b-1 border-white bg-transparent mb-30px py-10px"
            />
            <button
              className={`absolute md:-inset-y-[30px] -inset-y-8 md:right-0 right-2 navbar-btn search-btn  w-[30px] h-[30px] md:w-[46px] md:h-[46px] md:my-[31px] my-[40px] flex items-center justify-center group`}
            >
              <div className="sr-only">Search</div>
              <span
                className="
                    inline-block
                    group-hover:bg-black
                    group-hover:border-white
                    group-hover:after:bg-white
                    bg-transparent
                    rounded-[30px]
                    relative
                    w-[20px]
                    h-[20px]
                    border-[3px]
                    border-white
                    after:bg-white
                    after:h-[3px]
                    after:w-6/12
                    after:absolute
                    after:bottom-[-20%]
                    after:right-[-30%]
                    after:rotate-[45deg]
                    after:origin-bottom
                    icon-magnifying-glass
                    "
              ></span>
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}