/* eslint-disable react/no-danger */
/* eslint-disable react/prop-types */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import styles from './module.module.scss';
import ModuleTitle from '~atoms/module-title';
import { anchorLink, removeSymbols } from '~helpers/strings';

const Modules = ({ module, page, pageContext }) => {
  const GetModuleComponent = (moduleItem) => {
    const { items, name, style } = moduleItem || {};

    switch (name) {
      case 'content':
        return lazy(() => import('~molecules/content'));
      case 'top_list':
        return lazy(() => import('~organisms/toplist'));
      case 'archive':
        if (!items || items.length === 0) return null;
        return lazy(() => import('~organisms/archive'));
      case 'counter':
        return lazy(() => import('~molecules/counter'));
      case 'cards':
      case 'cards_v2':
        return lazy(() => import('~organisms/cards'));
      case 'contact_form':
        return lazy(() => import('~atoms/contact-form'));
      case 'pros_and_cons':
        return lazy(() => import('~molecules/pros-cons'));
      case 'iframe':
        return lazy(() => import('~atoms/iframe'));
      case 'faq':
        if (moduleItem?.display_front_end === '1') {
          return lazy(() => import('~atoms/faq'));
        }
        return null;
      case 'accordion':
        return lazy(() => import('~organisms/accordion'));
      case 'anchor':
        if (items && items.length > 0) {
          if (style === 'template_two') {
            return lazy(() => import('~organisms/anchor/template-two'));
          }
          return lazy(() => import('~organisms/anchor/template-one'));
        }
        return null;
      case 'carousel':
        if (
          items.length > 0 && // has items
          items.filter((item) => item.image === null).length === 0 // not filled with null items
        ) {
          return lazy(() => import('~organisms/carousel'));
        }
        return null;
      case 'bonus':
        return lazy(() => import('~molecules/bonus/template-one'));
      case 'image':
        return lazy(() => import('~atoms/image'));
      case 'spotlights':
        if (module?.mode === 'image_text') {
          if (module?.style === 'template_two') {
            return lazy(() => import('~molecules/spotlights_v2/image-text/template-two'));
          } else if (module?.style === 'template_three') {
            return lazy(() => import('~molecules/spotlights_v2/image-text/template-three'));
          }
          return lazy(() => import('~molecules/spotlights_v2/image-text/template-one'));
        } else if (module?.mode === 'icon') {
          return lazy(() => import('~molecules/spotlights_v2/icon/template-one'));
        } else if (module?.mode === 'image') {
          if (module?.style === 'template_two') {
            return lazy(() => import('~molecules/spotlights_v2/image/template-two'));
          }
          return lazy(() => import('~molecules/spotlights_v2/image/template-one'));
        }

      default:
        return null;
    }
  };

  const ModuleComponent = GetModuleComponent(module);

  // eslint-disable-next-line no-nested-ternary
  const anchorLabel = module.anchor_label
    ? removeSymbols(anchorLink(module.anchor_label))
    : module.name === 'archive'
    ? 'archiveLabel'
    : `module_${module.module_value_id}`;

  const extraProps = () => {
    switch (module.name) {
      case 'bonus':
        return {
          operator: module?.value,
          logo: module?.value?.logo_url,
          hasLink: true,
        };
      case 'iframe':
        return {
          src: module.iframe_source,
          lazyLoad: true,
        };
      default:
        return {
          anchorLabel,
        };
    }
  };

  const moduleClassName = `${module.name}Module`;

  const moduleBackgroundColor = {
    '--module-background-color': module.background_color,
  };

  const ModuleIntro = module.module_introduction && lazy(() => import('~molecules/content'));
  return (
    ModuleComponent && (
      <div
        id={module.name === 'archive' && module.module_title ? null : anchorLabel}
        style={module.background_color && moduleBackgroundColor}
        className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] || '' : ''} ${
          module.name || ''
        } ${styles.module || ''} ${module?.style ? styles[module.style] || '' : ''} module`}
      >
        <ModuleTitle module={module} anchorLabel={module.name === 'archive' && anchorLabel} />
        {ModuleIntro && (
          <Suspense fallback={<></>}>
            <ModuleIntro module={{ value: module.module_introduction }} />
          </Suspense>
        )}
        <Suspense fallback={<></>}>
          <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
        </Suspense>
      </div>
    )
  );
};

Modules.propTypes = {
  module: PropTypes.shape({
    anchor_label: PropTypes.string,
    name: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    module_title_tag: PropTypes.string,
    module_title: PropTypes.string,
    link_label: PropTypes.string,
    link_value: PropTypes.string,
    style: PropTypes.string,
  }),
  page: PropTypes.shape({ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }),
  pageContext: PropTypes.shape({}),
};

export default Modules;
