/* eslint-disable react/forbid-prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import Title from 'gatsby-matrix-theme/src/gatsby-core-theme/hooks/tabs/title';
import keygen from '~helpers/keygen';
import List from './list';
import styles from './toplist.module.scss';
import Tabs from '~hooks/tabs';
import ModuleIntroduction from '~molecules/content';
import AffiliateDisclaimer from '../../../../components/atoms/disclaimer/affiliate-disclaimer';
import { TrackingKeys } from '~constants/tracking-api'
import VerifiedAuthor from '../../../../images/icons/verified-author';

const TopList = ({
  module,
  toplistHeading,
  page,
  moduleName = TrackingKeys?.TOPLIST,
  isHomepageFirstModule = false,
  showAffiliateDisclaimer = true,
  verifyIcon = <VerifiedAuthor />,
  showIcon = false,
  icon = null,
  modulePosition,
}) => {
  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}
        moduleName={moduleName}
        modulestyle={module?.style}
        hasLoadMoreButton={toplist.show_load_more}
        initItemsCount={toplist.num_items_initial_load || 0}
        loadItemsCount={toplist.num_items_load_more || 0}
        pageTemplate={page?.template}
        template={page?.template}
        verifyIcon={verifyIcon}
        modulePosition={modulePosition}
      />
    </div>
  ));

  const showTitle = !showTabs && (module.title || module.module_title);
  const showModuleIntro = !showTabs && module.module_introduction;

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

TopList.propTypes = {
  moduleName:  PropTypes.string,
  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.element,
  showIcon: PropTypes.string,
  icon: PropTypes.func,
  modulePosition: PropTypes.number,
};

export default TopList;
