/* eslint-disable react/destructuring-assignment */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/no-danger */
/* eslint-disable react/prop-types */
/* eslint-disable no-else-return */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import Content from '~molecules/content';
import Toplist from '~organisms/toplist';
import Cards from '../../../../components/organisms/cards';
import Anchor from '~organisms/anchor/template-one';
import styles from './module.module.scss';
import ModuleTitle from '~atoms/module-title';
import { anchorLink, removeSymbols } from '~helpers/strings';
import { prettyTracker } from '~helpers/getters';

const Modules = ({ module, page, pageContext, serverData }) => {
  const GetModuleComponent = (moduleItem) => {
    const { items, name } = moduleItem || {};
    switch (name) {
      case 'content':
        return Content;
      case 'top_list':
        return 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 Cards;
      case 'pros_and_cons':
        return lazy(() => import('~molecules/pros-cons'));
      case 'accordion':
        return lazy(() => import('~organisms/accordion'));
      case 'anchor':
        if (items && items.length > 0) {
          return Anchor;
        }
        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'));
        }
        break;
      case 'sponsored_providers':
        if (page.relation_type === 'tournament') {
          return lazy(() => import('../../../../components/organisms/schedule'));
        }
        return null;
      case 'round_schedule':
        return lazy(() => import('../../../../components/molecules/schedule'));
      case 'match_statistics':
        return lazy(() => import('../../../../components/organisms/match/details'));
      case 'standings_table':
        if (serverData && Object.values(serverData).length === 1) {
          // League table
          return lazy(() => import('../../../../components/organisms/standings'));
        } else if (serverData && Object.values(serverData).length > 1) {
          // Tournament table
          return lazy(() =>
            import('../../../../components/organisms/standings/tournament-standings')
          );
        }
        return null;
      case 'contact_form':
        return lazy(() => import('~atoms/contact-form'));
      case 'auto_generated_content':
        return lazy(() => import('../../../../components/atoms/game-page-content'));
      case 'faq':
        if (moduleItem?.display_front_end === '1') {
          return lazy(() => import('~atoms/faq'));
        }
        return null;
      default:
        return null;
    }
  };

  const useSuspense = ['cards_v2', 'content', 'top_list', 'anchor'];

  const ModuleComponent = GetModuleComponent(module);

  const extraProps =
    module.name === 'bonus'
      ? {
          operator: module?.value,
          logo: module?.value?.logo_url,
          hasLink: true,
          prettyLink: prettyTracker(module?.value),
        }
      : {};

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

  module.background_color =
    module.name === 'match_schedule' ? 'transparent' : module.background_color;

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

  return (
    ModuleComponent && (
      <div
        id={module.anchor_label && `${removeSymbols(anchorLink(module.anchor_label))}`}
        style={module.background_color && moduleBackgroundColor}
        className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] : ''} ${
          module.name
        } ${styles.module} ${module?.style && styles[module.style]} module`}
      >
        <ModuleTitle module={module} />
        {module.module_introduction && (
          <div dangerouslySetInnerHTML={{ __html: module?.module_introduction }} />
        )}
        {useSuspense.includes(module.name) ? (
          <ModuleComponent
            module={module}
            page={page}
            pageContext={pageContext}
            serverData={serverData}
            {...extraProps}
          />
        ) : (
          <Suspense fallback={<div className={`${styles[module.name]}`} />}>
            <ModuleComponent
              module={module}
              page={page}
              pageContext={pageContext}
              serverData={serverData}
              {...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;
