import Link from 'next/link';
import React, { useState } from 'react';
import { MenuIcon, XIcon } from '@heroicons/react/outline'
import { Transition } from "@headlessui/react";
import { useRouter } from 'next/router'

const navigation = [
  { name: 'Главная', href: '/', as: false },
  { name: 'Программирование', href: '/posts/[slug]', as:'programming'},
  { name: 'Робототехника', href: '/posts/[slug]', as: 'robotics' },
  { name: '3D моделирование', href: '/posts/[slug]', as:'3dmodeling' }
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

const Navigation = (): JSX.Element => {
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();

  return (
    <nav className="">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-4">
                {navigation.map((item) => (
                  <Link as={ item.as ? '/posts/'+item.as : ''} href={item.href} key={item.name}>
                    <a
                      className={classNames(
                        item.as == router.query.slug && router.query.slug !== 'undefined'?
                            'bg-gray-900 text-white' :
                            item.href == router.pathname && item.as === false ?
                            'bg-gray-900 text-white' :
                            'text-gray-900 hover:bg-gray-700 hover:text-white',
                          'px-3 py-2 rounded-md text-sm font-medium'
                      )}
                        aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'false'}
                    >
                      {item.name}
                    </a>
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div className="-mr-2 flex md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              type="button"
              aria-controls="mobile-menu"
              aria-expanded="false"
            >
              <span className="sr-only">Открыть главное меню</span>
              {!isOpen ? (
                <MenuIcon className="block h-6 w-6" aria-hidden="false" />
              ) : (
                <XIcon className="block h-6 w-6" aria-hidden="true" />
              )}
            </button>
          </div>
        </div>
      </div>

      <Transition
        show={isOpen}
        enter="transition ease-out duration-100 transform"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="transition ease-in duration-75 transform"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
        className="absolute bg-gray-100 z-50"
      >
        {(ref) => (
          <div className="md:hidden" id="mobile-menu">
            <div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {navigation.map((item) => (
                <Link as={'/posts/'+item.as}  href={item.href} key={item.name}>
                  <a
                    className={classNames(
                      item.as == router.query.slug && router.query.slug !== 'undefined'?
                        'bg-gray-900 text-white' :
                          item.href == router.pathname && item.as === 'true' ?
                            'bg-gray-900 text-white' :
                            'text-gray-900 hover:bg-gray-900 hover:text-white',
                            'block px-3 py-2 rounded-md text-base font-medium'
                    )}
                    aria-current={item.href ? 'page' : undefined}
                  >
                    {item.name}
                  </a>
                </Link>
                ))}
            </div>
          </div>
        )}
      </Transition>
  </nav>
  );
};

export default Navigation;