/* eslint-disable no-case-declarations */
/* eslint-disable react/no-danger */
import React, { lazy, Suspense, useState } from 'react';
import PropTypes from 'prop-types';
// import loadable from '@loadable/component';
import ScrollToTop from '~atoms/scroll-to-top';
import CookieConsent from '~organisms/cookie-consent';
import isSticky from '~hooks/stickyOnScroll';

export default function FloatingArea({
  pageContext,
  template,
  customStyles,
  hideOperatorBanner = false,
  offsetTop = 400,
}) {
  const status = pageContext.page.relation?.status;
  const hideBanner = status === 'inactive' || status === 'coming_soon';
  const showScroll = isSticky(offsetTop);
  const [closedBanner, setClosedBanner] = useState(false);
  const pageType = pageContext.page.relation_type;
  const footerNavigationData = pageContext.marketSections?.footer_navigation || null;

  const OperatorBanner =
    pageType === 'operator' && !hideBanner && !hideOperatorBanner
      ? lazy(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
      : null;

  const FooterNavigation =
    footerNavigationData && footerNavigationData?.modules?.length > 0 && pageType !== 'operator'
      ? lazy(() => import(`gatsby-core-theme/src/components/organisms/footer-navigation`))
      : null;

  return (
    <div className={`${customStyles.floatingArea} ${showScroll ? customStyles.show : ''}`}>
      <ScrollToTop />
      {OperatorBanner && (
        <Suspense fallback={<></>}>
          <OperatorBanner
            pageTemplate={template}
            module={{ name: 'operator_banner', tracking_link_name: 'main' }}
            floating
            closedBanner={closedBanner}
            setClosedBanner={setClosedBanner}
            operator={pageContext.page.relation}
          />
        </Suspense>
      )}
      <CookieConsent />
      {FooterNavigation && (
        <Suspense fallback={<></>}>
          <FooterNavigation section={footerNavigationData} />
        </Suspense>
      )}
    </div>
  );
}

FloatingArea.propTypes = {
  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,
  customStyles: PropTypes.string,
  offsetTop: PropTypes.number,
  hideOperatorBanner: PropTypes.bool,
  template: PropTypes.string,
};
