/* eslint-disable react/no-danger */
/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';

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 loadable(() => import('~molecules/content'));
      case 'top_list':
        return loadable(() => import('~organisms/toplist'));
      case 'archive':
        if (!items || items.length === 0) return null;
        return loadable(() => import('~organisms/archive'));
      case 'counter':
        return loadable(() => import('~molecules/counter'));
      case 'cards':
      case 'cards_v2':
        return loadable(() => import('~organisms/cards'));
      case 'contact_form':
        return loadable(() => import('~atoms/contact-form'));
      case 'pros_and_cons':
        return loadable(() => import('~molecules/pros-cons'));
      case 'faq':
        if (moduleItem?.display_front_end === '1') {
          return loadable(() => import('~atoms/faq'));
        }
        return null;
      case 'accordion':
        return loadable(() => import('~organisms/accordion'));
      case 'anchor':
        if (items && items.length > 0) {
          if (style === 'template_two') {
            return loadable(() => import('~organisms/anchor/template-two'));
          }
          return loadable(() => 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 loadable(() => import('~organisms/carousel'));
        }
        return null;
      case 'bonus':
        return loadable(() => import('~molecules/bonus/template-one'));
      case 'image':
        return loadable(() => import('~atoms/image'));
      case 'spotlights':
        if (process.env.ENABLE_SPOTLIGHT_V2) {
          return loadable(() => import('~molecules/spotlights_v2'));
        }
        return loadable(() => import('~atoms/spotlights'));

      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 =
    module.name === 'bonus'
      ? {
          operator: module?.value,
          logo: module?.value?.logo_url,
          hasLink: true,
        }
      : {
          anchorLabel,
        };

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

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

  const ModuleIntro = module.module_introduction && loadable(() => 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 && <ModuleIntro module={{ value: module.module_introduction }} />}
        <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
      </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;
