import React, { useEffect, useRef, useState } from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

import { MenuContainer, MenuHeaderDesktop, MenuHeaderMobile } from '../../styles/components/shared/MenuHeader.style';
import { Link as RouterLink, Router } from '../../i18n';
import { detectClientDevice } from '../../utils/deviceDetection';
import { Overlay } from '../../styles/components/shared/Overlay.style';
import { useRouter } from 'next/router';

interface Props {
  postTags?: any[];
  children: JSX.Element;
}

const Menu: React.FC<Props> = ({ postTags, children }) => {
  const navRef = useRef<HTMLElement>(null);
  const router = useRouter();
  const [openMenu, setOpenMenu] = useState<boolean>(false);

  useEffect(() => {
    Router.events.on('routeChangeStart', () => {
      setOpenMenu(false);
    });
  }, []);

  useEffect(() => {
    if (!detectClientDevice().isIOS) {
      if (openMenu) {
        disableBodyScroll(navRef.current, { reserveScrollBarGap: true });
      } else {
        enableBodyScroll(navRef.current);
      }
    }
  }, [openMenu]);

  function renderLinks(): React.ReactElement[] {
    return postTags.map((postTag, index: number) => {
      const isActive = router?.query?.tag === postTag.uid;
      return (
        postTag.id &&
        <RouterLink
          key={`postTag-${index}`}
          as={`/blog/${postTag.uid}`}
          href={`/blog/[tag]?tag=${postTag.uid}`}>
          <a className={isActive ? 'active' : ''}>{postTag?.data?.name}</a>
        </RouterLink>
      );
    });
  }

  return (
    <MenuContainer>
      <MenuHeaderDesktop>
        {renderLinks()}
      </MenuHeaderDesktop>
      <MenuHeaderMobile isOpen={openMenu} ref={navRef}>
        <div onClick={() => setOpenMenu(true)}>
          <i className="fas fa-bars" />
        </div>
        <aside>
          <div className="top-aside" onClick={() => setOpenMenu(false)}>
            <i className="fas fa-chevron-left" />
            Fermer le menu
          </div>
          <div className="mb">
            <RouterLink href="/blog" as="/blog">
              <a href="">Tous les articles</a>
            </RouterLink>
            {renderLinks()}
          </div>
          {children}
        </aside>
        <Overlay onClick={() => setOpenMenu(false)} />
      </MenuHeaderMobile>
    </MenuContainer>);
};

export default Menu;