import 'tippy.js/dist/tippy.css'

import Image from 'next/image'
import Link from 'next/link'

const LogoGWK = '/images/logogwk.svg'

//import { IconButton } from '@material-tailwind/react'

function MobileMenu() {
  const hideMenus = function () {
    document.getElementById('menus-mobile').style.display = 'none'
  }

  const showMenus = function () {
    document.getElementById('menus-mobile').style.display = 'grid'
  }

  return (
    <>
      <div className="relative z-[1024] sm:hidden">
        <button onClick={showMenus} className="group fixed right-5 top-5">
          <div className="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-yellow-700 bg-opacity-65 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4">
            <div className="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300">
              <div className="h-[2px] w-7 origin-left transform bg-white transition-all delay-100 duration-300 group-focus:translate-y-6"></div>
              <div className="h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:translate-y-6"></div>
              <div className="h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:translate-y-6"></div>
              <div className="absolute top-2.5 flex w-0 -translate-x-10 transform items-center justify-between transition-all duration-500 group-focus:w-12 group-focus:translate-x-0">
                <div className="absolute h-[2px] w-5 rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:rotate-45"></div>
                <div className="absolute h-[2px] w-5 -rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:-rotate-45"></div>
              </div>
            </div>
          </div>
        </button>
        <div
          id="menus-mobile"
          style={{
            display: 'none',
            gridTemplateRows: '120px auto 50px',
          }}
          className="
                        fixed 
                        bottom-0 
                        left-0 
                        max-h-full 
                        min-h-full
                        min-w-full
                        max-w-full
                        bg-white                        
                    "
        >
          <Link className="bg-white text-center" href="/" onClick={hideMenus}>
            <Image
              className="inline-block"
              src={LogoGWK}
              alt="Garuda Wisnu Kencana"
              width={100}
              height={100}
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              quality={75}
              placeholder="empty"
              priority
            />
          </Link>
          <ul className="bg-white" style={{ borderTop: '1px solid #ddd' }}>
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/pages/the-cultural-heritage"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                Cultural Heritage
              </Link>
            </li>
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/pages/the-events"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                The Events
              </Link>
            </li>
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/pages/the-story"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                The Story
              </Link>
            </li>
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/pages/wedding"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                Wedding
              </Link>
            </li>
            {/* <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/pages/the-cultural-map"
                className="mainmenu block px-10 py-3 text-xl font-Inter font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                Map GWK Cultural Park
              </Link>
            </li> */}
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}
                href="/monthly-release/page/1"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                Monthly Update
              </Link>
            </li>
            <li
              className="block list-none odd:bg-white"
              style={{ borderBottom: '1px solid #ddd' }}
            >
              <Link
                onClick={hideMenus}

                href="/media-corner/page/1"
                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
              >
                News & Media
              </Link>
            </li>

          </ul>
          <button
            onClick={hideMenus}
            className="bg-stone-50 text-center font-Inter text-sm font-medium text-stone-900 hover:bg-yellow-500 hover:text-white"
            style={{ borderTop: '1px solid #ddd' }}
          >
            Close
            {/* <IconButton placeholder={null}>
              <i className="fas x-mark text-white" />
            </IconButton> */}
            {/* 
          <IconButton onClick={hideMenus}>
            <i className="fas fa-heart" />
          </IconButton> */}
          </button>
        </div>
      </div>
    </>
  )
}

export default MobileMenu