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

import { PrismicDocument } from '../../prismic/api';
import { ProductPageData, SharedProductData } from '../../typings/entities';
import PrismicLinkComponent from '../PrismicLink';
import { MenuContainer, MenuHeaderDesktop, MenuHeaderMobile } from '../../styles/components/shared/MenuHeader.style';
import { detectClientDevice } from '../../utils/deviceDetection';
import { Link, Router } from '../../i18n';
import { Overlay } from '../../styles/components/shared/Overlay.style';
import { PrismicLink } from 'easy-prismic-react';

interface Props {
  products?: PrismicDocument<SharedProductData>[];
  FAQLink: PrismicLink;
}

const Menu: React.FC<Props> = ({ products, FAQLink }) => {
  const navRef = useRef<HTMLElement>(null);
  const [openMenu, setOpenMenu] = useState<boolean>(false);
  const [t] = useTranslation('header');

  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 {
    if (!products) {
      return;
    }

    return (
      <div>
        <ul>
          {products.filter((product) => !!product?.data).map((product: PrismicDocument<ProductPageData>, index: number) => (
            <li key={`product-${index}`}>
              <div>
                <img src={product.data.product_illustration.url} alt={product.data.product_illustration.alt} />
              </div>
              <Link as={`/products/${product.uid}`} href={`/products/[slug]?slug=${product.uid}`}>
                <a>{product.data.product_name}</a>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }

  return (
    <MenuContainer>
      <MenuHeaderDesktop>
        <div>
          <u>{t('solutions')}</u>
          {renderLinks()}
        </div>
        <Link href="/blog" as="/blog">
          {t('blog')}
        </Link>
        <PrismicLinkComponent link={FAQLink}>
          {t('faq')}
        </PrismicLinkComponent>
      </MenuHeaderDesktop>
      <MenuHeaderMobile isOpen={openMenu} ref={navRef}>
        <div onClick={() => setOpenMenu(true)}>
          <i className="fas fa-bars" />
          <span>{t('menu')}</span>
        </div>
        <aside>
          <div className="top-aside" onClick={() => setOpenMenu(false)}>
            <i className="fas fa-chevron-left" />
            {t('close')}
          </div>
          <h5>{t('solutions')}</h5>
          {renderLinks()}
          <h5>{t('otherLink')}</h5>
          <Link href="/blog" as="/blog">
            {t('blogFull')}
          </Link>
          <PrismicLinkComponent link={FAQLink} onClick={() => setOpenMenu(false)}>
            {t('faqFull')}
          </PrismicLinkComponent>
          <Link href="/" as="/">
            <a href="">{t('homepage')}</a>
          </Link>
        </aside>
        <Overlay onClick={() => setOpenMenu(false)} />
      </MenuHeaderMobile>
    </MenuContainer>);
};

export default Menu;