import 'tailwindcss/tailwind.css'

import MobileMenu from 'components/Navbar/MobileMenu'
import { AppProps } from 'next/app'
import { Inter, Playfair_Display } from 'next/font/google'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

import * as ga from '../lib/ga'

// fonts
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
})

const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-serif',
})

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  const [isOpen, setOpen] = useState(false)

  if (isOpen) {
    return (
      <main
        className={`${inter.variable} font-sans, ${playfair.variable} font-serif`}
      >
        <div>
          <Fade>
            <div className="min-h-screen bg-stone-900">
              <div className="relative w-full">
                <div className="absolute right-4 top-4 z-50 text-white sm:right-4 sm:top-7">
                  {/* <Hamburger toggled={isOpen} toggle={setOpen} /> */}
                  {/* <MobileMenu /> */}
                </div>

                {/* ======== */}
                {/* <Slide> */}
                <div>
                  <div className="absolute top-0 w-full">
                    <ul className="block w-full">
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/the-story"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          The Story
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/the-cultural-heritage"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          Cultural Heritage
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/the-park"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          The Park
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/function"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          Function
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/the-events"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          The Events
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/faq"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          FAQ
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/newsroom"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          Newsroom
                        </Link>
                      </li>
                      <li className="border-neutral-800 w-full border-b-2 bg-black py-5 pl-5">
                        <Link
                          href="/pages/promo"
                          className="font-sans  text-2xl font-extralight text-yellow-50 duration-150 ease-in"
                        >
                          Promo
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
                {/* </Slide> */}
                {/* ======== */}
              </div>
            </div>
          </Fade>
        </div>
      </main>
    )
  }

  return (
    <>
      <div className="relative z-50 w-full">
        <div className="absolute right-2 top-2 text-white sm:right-4 sm:top-7">
          <MobileMenu />
        </div>
      </div>
      <main
        className={`${inter.variable} font-sans, ${playfair.variable} font-serif`}
      >
        <Component {...pageProps} />
      </main>
    </>
  )
}