import { FC, MouseEvent as ReactMouseEvent, useEffect, useState } from 'react';
import Brand from './Brand';
import { roundedSmallLinkClassName } from './RoundedExternalLink';
import { useTranslation } from 'next-i18next';
import { Popover } from '@headlessui/react';
import { FiMenu, FiX } from 'react-icons/fi';
import Link from 'next/link';
import { ProjectsList } from './LandingPage/HeroSection';
import capitalize from 'lodash/capitalize';
import { isFeatureFlagEnabled, publicRuntimeConfig } from "../../runtimeConfig";

const getScrollToSectionProps = (to: string) => ({
  href: to === 'top' ? '#' : `${to}`,
  onClick: (e: ReactMouseEvent) => {
    e.preventDefault();
    switch (to) {
      case 'top':
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        });
        break;
      default:
        (document.getElementById(to) as Element).scrollIntoView({
          behavior: 'smooth',
        });
    }
  },
});

const backdropStyles = 'bg-opacity-70 backdrop-filter backdrop-blur-2xl';
const navbarBgStyle = `${backdropStyles} bg-white border-light border-b`;
const popoverPanelClassName = `${backdropStyles}  border-light md:border rounded md:absolute top-7 bg-transparent md:bg-white md:left-1/2 md:-translate-x-1/2 transform md:px-4`;

interface NavbarProps {
  navbarWrapperClassName: string;
  projectsList: ProjectsList;
}

const Navbar: FC<NavbarProps> = ({ navbarWrapperClassName, projectsList }) => {
  const [shouldNavbarHaveBackground, setShouldNavbarHaveBackground] = useState(false);
  const [isNavbarCollapsed, setNavbarCollapsed] = useState(true);

  const { t } = useTranslation('landing');
  useEffect(() => {
    const handleScroll = () => setShouldNavbarHaveBackground(window.scrollY > 10);
    document.addEventListener('scroll', handleScroll);
    return () => document.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div
      className={`fixed top-0 left-0 w-full z-10 transition duration-100 ${
        (shouldNavbarHaveBackground || !isNavbarCollapsed) && navbarBgStyle
      } ${navbarWrapperClassName ?? ''}`}
    >
      <div className="w-container mx-auto md:flex justify-between items-center">
        <div className="flex justify-between items-center w-full">
          <a {...getScrollToSectionProps('top')}>
            <Brand className="font-bold text-2xl" />
          </a>
          <span className="md:hidden" onClick={() => setNavbarCollapsed(!isNavbarCollapsed)}>
            {isNavbarCollapsed ? <FiMenu /> : <FiX />}
          </span>
        </div>
        <div
          className={`w-full mt-5 md:flex items-center justify-end ${
            isNavbarCollapsed && 'hidden'
          }`}
        >
          <ul className="flex md:flex-row flex-col">
            {
              isFeatureFlagEnabled(publicRuntimeConfig.SHOW_LINKS_TO_APP) && (
                <li className="my-1">
                  <Popover className="relative">
                    <Popover.Button className="font-bold">{t('navbar.schools')}</Popover.Button>
                    <Popover.Panel className={popoverPanelClassName}>
                      <ul>
                        {projectsList.map(({ projectID, appName }) => (
                          <li className="ml-2 md:ml-0 my-2">
                            <a href={`/${projectID}`}>{capitalize(appName)}</a>
                          </li>
                        ))}
                      </ul>
                    </Popover.Panel>
                  </Popover>
                </li>
              )
            }
            <li className="font-bold md:mx-10 my-1">
              <Link href="/calculator">
                <a>{t('navbar.pointsCalculator')}</a>
              </Link>
            </li>
          </ul>
          <span className="block mt-5 md:mt-0 md:ml-5">
            <a
              {...getScrollToSectionProps('support-us')}
              className={[
                'font-bold inline-block w-full sm:w-auto text-center',
                roundedSmallLinkClassName,
              ].join(' ')}
            >
              {t('navbar.supportTheProject')}
            </a>
          </span>
        </div>
      </div>
    </div>
  );
};

export default Navbar;