import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import PropTypes from 'prop-types';

import logo from '../../assets/logos/LogoFull.svg';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import '../../App.css';
import Wrapper from '../../layout/Wrapper';
import menuIcon from './../../assets/icons/menu.svg';

export default function Navigation({ links, scrollToView, activeLinks }) {
  const location = useLocation();
  const home = useNavigate();
  function handleLogo() {
    home('/');
  }

  function checkUrl(event) {
    //console.log(location.pathname);

    if (location.pathname === '/') scrollToView(event);
    else home('/contact');
  }

  return (
    <Popover className="bg-white dark:bg-dg-primary-1700 fixed w-full top-0 z-50">
      <Wrapper>
        <div className="flex justify-between items-center border-gray-100 dark:border-dg-primary-1800 py-6 md:space-x-10">
          <div className="flex justify-start lg:w-0 lg:flex-1">
            <a href="#">
              <span className="sr-only">Diligent</span>
              <img
                className="h-8 w-auto sm:h-10"
                src={logo}
                alt="Diligent logo"
                onClick={() => handleLogo()}
              />
            </a>
          </div>
          <div className="mr-2 -my-2 md:hidden">
            <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center  text-dg-primary-900 focus:outline-none">
              <img src={menuIcon} alt="Menu" className="h-[30px]" />
              {/*<span className="sr-only">Open menu</span>
              <div className="h-6 w-6" aria-hidden="true" />*/}
            </Popover.Button>
          </div>
          <Popover.Group
            as="nav"
            className="hidden md:flex space-x-8 lg:space-x-10 items-center"
          >
            {links.map(item => (
              <NavLink
                key={item.name}
                to={item.href}
                className={({ isActive }) => {
                  return `text-p font-medium dark:text-white hover:text-dg-primary-900 focus:text-dg-primary-900 active:text-dg-primary-900 capitalize ${activeLinks(
                    isActive,
                  )}`;
                }}
              >
                {item.name}
              </NavLink>
            ))}
            {/* React Router Link does not support Anchor tags */}
            <div
              // onClick={event => scrollToView(event)}
              onClick={event => checkUrl(event)}
              href="#contact"
              className="contact-us-link text-p"
            >
              Contact
            </div>
            {/* DARK MODE BUTTON */}
            {/* <div
              className="text-dark-gray font-medium text-base capitalize dark:text-white hover:cursor-pointer"
              onClick={() => {document.body.classList.toggle('dark'); localStorage.setItem('darkMode', 'dark'); }}
            >
              💡
            </div> */}
          </Popover.Group>
        </div>
      </Wrapper>

      <Transition
        as={Fragment}
        enter="duration-200 ease-out"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="duration-100 ease-in"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Popover.Panel
          focus
          static
          className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
        >
          {({ close }) => (
            <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
              <div className="pt-5 pb-6 px-5">
                <div className="flex items-center justify-between">
                  <div>
                    <img
                      className="h-8 w-auto cursor-pointer"
                      src={logo}
                      alt="Diligent"
                      onClick={() => handleLogo()}
                    />
                  </div>
                  <div className="-mr-2">
                    <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center transition-all text-dg-primary-900 hover:text-white hover:transition-all hover:bg-dg-primary-900 focus:outline-none">
                      <p className="font-semibold">x</p>
                      {/*<span className="sr-only">Close menu</span>
                      <div className="h-6 w-6" aria-hidden="true" />*/}
                    </Popover.Button>
                  </div>
                </div>
                <div className="mt-6">
                  <nav className="grid gap-y-8">
                    {links.map(item => (
                      <NavLink
                        onClick={() => close()}
                        key={item.name}
                        to={item.href}
                        className="text-p p-3 flex justify-center items-center rounded-md transition-all hover:transition-all hover:bg-dg-primary-900 hover:text-white"
                      >
                        <div aria-hidden="true" />
                        <span className="ml-3 text-base font-medium text-inherit">
                          {item.name}
                        </span>
                      </NavLink>
                    ))}
                    <a
                      href="#contact"
                      onClick={event => {
                        close();
                        checkUrl(event);
                      }}
                      className="contact-us-link flex justify-center items-center text-p"
                    >
                      <span className="ml-3 text-base font-medium text-inherit">
                        Contact
                      </span>
                    </a>
                  </nav>
                </div>
              </div>
            </div>
          )}
        </Popover.Panel>
      </Transition>
    </Popover>
  );
}

Navigation.propTypes = {
  links: PropTypes.arrayOf(PropTypes.object),
  scrollToView: PropTypes.func,
  activeLinks: PropTypes.func,
};
