import React, { lazy, Suspense } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import SeeMore from '../../atoms/see-more';
import ModuleIntroduction from './module-introduction';

export default function index({ module, page, seeMoreButtonDown = false, modulePosition }) {
  // eslint-disable-next-line no-unused-expressions
  module.style === 'template_three' ? (seeMoreButtonDown = true) : seeMoreButtonDown;
  const templateThree = module.style === 'template_three';
  const ComparisonTableComponent = lazy(() => import('../../atoms/cards/comparison-table'));

  const OperatorsTableComponent = lazy(() => import('../../atoms/cards/operators-table'));

  const GridLayoutComponent = lazy(() => import('./template-one'));

  const SrcollLayoutComponent = lazy(() => import('./template-two'));

  const TemplateThreeComponent = lazy(() => import('./template-three'));

  const Component = () => {
    switch (module?.style) {
      case 'stack_table': {
        if (module.cards_page_type === 'operator') {
          return (
            <Suspense fallback={<></>}>
              <OperatorsTableComponent
                module={module}
                page={page}
                modulePosition={modulePosition}
              />
            </Suspense>
          );
        }
        return null;
      }
      case 'comparison_table': {
        if (module.cards_page_type === 'operator') {
          return (
            <Suspense fallback={<></>}>
              <ComparisonTableComponent
                module={module}
                page={page}
                modulePosition={modulePosition}
              />
            </Suspense>
          );
        }
        return null;
      }
      case 'template_two' || 'template_two_christmas': {
        return (
          <Suspense fallback={<></>}>
            <SrcollLayoutComponent module={module} page={page} modulePosition={modulePosition} />
          </Suspense>
        );
      }
      case 'template_three': {
        return (
          <Suspense fallback={<></>}>
            <TemplateThreeComponent
              module={module}
              page={page}
              modulePosition={modulePosition}
              templateThree
            />
          </Suspense>
        );
      }
      default: {
        return (
          <Suspense fallback={<></>}>
            <GridLayoutComponent module={module} page={page} modulePosition={modulePosition} />
          </Suspense>
        );
      }
    }
  };
  return (
    <>
      <ModuleIntroduction showSeeMore={!seeMoreButtonDown} module={module} />
      {Component && <Component />}
      {seeMoreButtonDown && (
        <SeeMore
          module={module}
          templateThree={templateThree}
          viewMoreIcon={templateThree && <FaArrowRight size={12} />}
        />
      )}
    </>
  );
}
