/* eslint-disable import/no-extraneous-dependencies */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { getURLParam } from 'gatsby-core-theme/src/helpers/getters';
import settings from 'gatsby-core-theme/src/constants/settings.mjs';
import Module from '~molecules/module';
import styles from './main.module.scss';
import keygen from '~helpers/keygen';

const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator = false }) => {
  const { page } = pageContext;
  const SearchPage = page.path === 's' ? lazy(() => import(`~pages/search`)) : null;
  const HtmlSitemap = page.path === 'sitemap' ? lazy(() => import(`~atoms/sitemap`)) : null;
  const AuthorBox = page.author_id ? lazy(() => import(`~atoms/author-box`)) : null;
  const NotFound = page?.path?.includes('404') ? lazy(() => import(`~atoms/not-found`)) : null;

  const siteName = process.env.GATSBY_SITE_NAME;

  const showNewsletter = !(
    settings[siteName]?.filter_pages?.includes('*') ||
    settings[siteName]?.filter_pages?.includes(page?.relation_type) ||
    settings.default?.filter_pages?.includes(page?.relation_type)
  );

  const Newsletter = showNewsletter
    ? lazy(() => import('gatsby-core-theme/src/components/molecules/newsletter'))
    : null;

  const NewsletterSuccess =
    showNewsletter && typeof window !== 'undefined' && Boolean(getURLParam('subscribed'))
      ? lazy(() => import(`gatsby-core-theme/src/components/molecules/newsletter/success`))
      : null;

  return (
    <main className={`${styles.modulePage} ${styles.main} ${styles[page.template]}`}>
      {NotFound && (
        <Suspense fallback={<></>}>
          <NotFound />
        </Suspense>
      )}
      {HtmlSitemap && (
        <Suspense fallback={<></>}>
          <HtmlSitemap pageContext={pageContext} />
        </Suspense>
      )}
      {section.modules &&
        section.modules.map((module) => (
          <Module
            key={keygen()}
            module={module}
            exclOperator={exclOperator}
            page={page}
            pageContext={pageContext}
            serverData={serverData}
          />
        ))}
      {AuthorBox && (
        <Suspense fallback={<></>}>
          <AuthorBox
            author={page.author}
            date={page.updated_at ? page.updated_at : page.created_at}
            readingTime={page.reading_time}
            reviewer={page.reviewer_id && page.reviewer}
          />
        </Suspense>
      )}
      {SearchPage && (
        <Suspense fallback={<></>}>
          <SearchPage page={page} />
        </Suspense>
      )}
      {Newsletter && (
        <Suspense fallback={<></>}>
          <Newsletter page={page} />
        </Suspense>
      )}
      {NewsletterSuccess && (
        <Suspense fallback={<></>}>
          <NewsletterSuccess />
        </Suspense>
      )}
    </main>
  );
};

Main.propTypes = {
  section: PropTypes.shape({
    modules: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string,
      })
    ),
  }),
  page: PropTypes.shape({
    path: PropTypes.string,
  }),
  pageContext: PropTypes.shape({}),
  serverData: PropTypes.shape({}),
  exclOperator: PropTypes.bool,
};

export default Main;
