/* 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 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';
import { prettyTracker } from '~helpers/getters';

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

  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 }} />
        )}
        <ModuleComponent
          module={module}
          page={page}
          pageContext={pageContext}
          serverData={serverData}
          {...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;
