/* eslint-disable camelcase */
/* eslint-disable no-useless-concat */
/* eslint-disable no-restricted-globals */
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
// eslint-disable-next-line import/no-extraneous-dependencies
import { v4 as uuidv4 } from 'uuid';
import { getSection } from '~helpers/getters';
import Header from '~molecules/header';
import Main from '~molecules/main';
import Footer from '~molecules/footer';
import Navigation from '~organisms/navigation';
import ScrollToTop from '~atoms/scroll-to-top';
import CookieConsent from '~organisms/cookie-consent';
import isSticky from '~hooks/stickyOnScroll';
import styles from './body.module.scss';
import { setCookie, getCookie } from '~helpers/cookies';

function Body({ pageContext, children, hideOperatorBanner, serverData, offsetTop = 400 }) {
  const getBodySection = (name) => getSection(name, pageContext);
  const { template } = pageContext.page;
  const is404 = pageContext?.page?.path?.includes('404');

  const main = getBodySection('main');
  const navigation = getBodySection('navigation');
  const footer = getBodySection('footer');
  const showScroll = isSticky(offsetTop);

  useEffect(() => {
    if (!getCookie('affUUID')) {
      setCookie('affUUID', uuidv4());
    }
  }, []);

  const status = pageContext.page.relation?.status;
  const hideBanner = status === 'inactive' || status === 'coming_soon';
  const pageType = pageContext.page.relation_type;
  const OperatorBanner =
    pageType === 'operator' && !hideBanner && !hideOperatorBanner
      ? loadable(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
      : null;

  return (
    <>
      {navigation && (
        <Navigation
          template={template}
          pageContext={pageContext}
          section={navigation}
          orientation="horizontal"
          mobileAnimation="collapseFull"
          stopScrollOnOpen
          canOpenAllSubMenus
        />
      )}
      {!is404 && <Header serverData={serverData} section={pageContext} />}
      {main && !children && (
        <Main serverData={serverData} section={main} pageContext={pageContext} />
      )}
      {children && <main>{children}</main>}
      <Footer template={template} section={footer} />
      <div className={`${styles.floatingArea} ${showScroll ? styles.show : ''}`}>
        <ScrollToTop />
        {OperatorBanner && (
          <OperatorBanner
            pageTemplate={template}
            module={{ name: 'operator_banner', tracking_link_name: 'main' }}
            floating
            operator={pageContext.page.relation}
          />
        )}
        <CookieConsent />
      </div>
    </>
  );
}

Body.propTypes = {
  children: PropTypes.element,
  // eslint-disable-next-line react/forbid-prop-types
  serverData: PropTypes.shape({}),
  offsetTop: PropTypes.number,
  pageContext: PropTypes.shape({
    page: PropTypes.shape({
      id: PropTypes.number,
      relation_type: PropTypes.string,
      path: PropTypes.string,
      template: PropTypes.string,
      relation: PropTypes.shape({
        status: PropTypes.string,
        logo_url: PropTypes.string,
      }),
      market: PropTypes.string,
    }),
    marketSections: PropTypes.shape({
      footer_navigation: PropTypes.shape({}),
      popup: PropTypes.shape({
        modules: PropTypes.arrayOf({}),
      }),
    }),
  }).isRequired,
  hideOperatorBanner: PropTypes.bool,
};

export default Body;
