/* eslint-disable react/forbid-prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import keygen from '~helpers/keygen';
import List from './list';
import styles from './toplist.module.scss';
import AffiliateDisclaimer from '../../../../components/atoms/affiliate-disclaimer';

const TopList = ({
  module,
  toplistHeading,
  page,
  isHomepageFirstModule = false,
  showAffiliateDisclaimer = true,
  verifyIcon = '../../../../images/verifiedAuthor.svg',
  showIcon = false,
  icon = null,
  modulePosition = 0,
}) => {
  const showTabs = module.items.length > 1;
  const moduleStyle = module?.style;

  const content = module.items.map((toplist) => (
    <div label={toplist.title} key={keygen()}>
      {toplistHeading}
      <List
        pagePath={page?.path}
        toplist={toplist}
        modulestyle={module?.style}
        hasLoadMoreButton={toplist.show_load_more}
        initItemsCount={toplist.num_items_initial_load}
        loadItemsCount={toplist.num_items_load_more}
        pageTemplate={page?.template}
        template={page?.template}
        verifyIcon={verifyIcon}
        modulePosition={modulePosition}
      />
    </div>
  ));

  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
  const Title =
    !showTabs &&
    (module.title || module.module_title) &&
    loadable(() => import('gatsby-matrix-theme/src/gatsby-core-theme/hooks/tabs/title'));
  const ModuleIntro =
    !showTabs && module.module_introduction && loadable(() => import('~molecules/content'));

  return showTabs ? (
    <Tabs
      module={module}
      tabsAlign="right"
      gtmClass="toplist-tabs-menu-gtm"
      moduleStyle={moduleStyle}
      isHomepageFirstModule={isHomepageFirstModule}
      showAffiliateDisclaimer={showAffiliateDisclaimer}
      showIcon={showIcon}
      icon={icon}
    >
      {content}
    </Tabs>
  ) : (
    <>
      {Title && (
        <div className={`${styles?.tabsHeader || ''} ${styles?.titleAndTab || ''}`}>
          <Title
            module={module}
            moduleStyle={moduleStyle}
            isHomepageFirstModule={isHomepageFirstModule}
          />
          {showAffiliateDisclaimer && <AffiliateDisclaimer className={styles.disclaimer} />}
        </div>
      )}
      {ModuleIntro && (
        <ModuleIntro
          module={{ value: module.module_introduction }}
          isHomepageFirstModule={isHomepageFirstModule}
        />
      )}
      {content}
    </>
  );
};

TopList.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.shape({})),
    title: PropTypes.string,
    module_title: PropTypes.string,
    module_introduction: PropTypes.string,
    style: PropTypes.string,
  }),
  isHomepageFirstModule: PropTypes.bool,
  toplistHeading: PropTypes.element,
  page: PropTypes.shape({ template: PropTypes.string, path: PropTypes.string }),
  showAffiliateDisclaimer: PropTypes.bool,
  verifyIcon: PropTypes.string,
  showIcon: PropTypes.string,
  icon: PropTypes.func,
  modulePosition: PropTypes.number,
};

export default TopList;
