/* eslint-disable no-case-declarations */
/* eslint-disable react/no-danger */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
// eslint-disable-next-line import/no-extraneous-dependencies
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 getAllMarketsHomepage = () =>
    Object.keys(pageContext?.allMarkets || {})?.map((elm) => elm.split('_')[1]) || [];
  const isPageHomepage =
    getAllMarketsHomepage()?.includes(pageContext?.page?.path) || pageContext?.page?.path === '/';
  const footerNavigationData = pageContext.marketSections?.footer_navigation || null;

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

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

  return (
    <div className={`${customStyles.floatingArea} ${showScroll ? customStyles.show : ''}`}>
      <ScrollToTop />
      {!['not_recommended', 'inactive', 'blacklisted'].includes(
        pageContext?.page?.relation?.status
      ) &&
        OperatorBanner && (
          <OperatorBanner
            type={pageType}
            template={template}
            sticky
            logo={pageContext.page.relation.logo_url}
            operator={pageContext.page.relation}
            closedBanner={closedBanner}
            setClosedBanner={setClosedBanner}
          />
        )}
      {CookieConsent && (
        <CookieConsent
          market={pageContext?.page?.market}
          type={pageType}
          template={template}
          settingsCookie
          isPageHomepage={isPageHomepage}
        >
          <p>
            We use cookies in order to optimise our site and improve your experience with us. By
            using the site you consent to our
            <a href="/cookies" className="cookie-consent-gtm">
              Cookie Policy
            </a>
            .
          </p>
        </CookieConsent>
      )}
      {FooterNavigation && <FooterNavigation section={footerNavigationData} />}
    </div>
  );
}

FloatingArea.propTypes = {
  pageContext: PropTypes.shape({
    allMarkets: 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,
};
