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';

const TopList = ({ module, toplistHeading, page }) => {
  const showTabs = module.items.length > 1;
  const content = module.items.map((toplist) => (
    <div
      className={!showTabs && (styles.toplistContainer || '')}
      label={toplist.title}
      key={keygen()}
    >
      {toplistHeading}
      <List
        pagePath={page?.path}
        toplist={toplist}
        hasLoadMoreButton={toplist.show_load_more}
        initItemsCount={toplist.num_items_initial_load}
        loadItemsCount={toplist.num_items_load_more}
        pageTemplate={page?.template}
        module={module.name}
      />
    </div>
  ));
  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));

  return showTabs ? (
    // eslint-disable-next-line react/no-children-prop
    <Tabs tabsAlign="right" gtmClass="toplist-tabs-menu-gtm" children={content} />
  ) : (
    content
  );
};

TopList.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  module: PropTypes.shape({ name: PropTypes.string, items: PropTypes.arrayOf(PropTypes.object) }),
  toplistHeading: PropTypes.element,
  page: PropTypes.shape({ template: PropTypes.string, path: PropTypes.string }),
};

export default TopList;
