/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import AffiliateDisclaimer from '../../../components/atoms/disclaimer/affiliate-disclaimer';
import Title from './title';
import ModuleIntro from '~molecules/content';
import TabList from './tab/tab-list';
import styles from './tabs.module.scss';

const Tabs = ({
  module = {},
  siteName = '',
  children,
  showAll,
  tabsAlign,
  activeTabClass = '',
  HeaderComp,
  headerClass = '',
  gtmClass = '',
  moduleStyle,
  isHomepageFirstModule = false,
  showAffiliateDisclaimer = false,
  showIcon = false,
  icon = null,
  showNumberOfResults = false,
  totalResults,
}) => {
  const showAllTabId = `${showAll}_0`;
  const [activeTab, setActiveTab] = useState(
    showAll ? showAllTabId : `${children[0].props.label}_0`
  );
  const showTitle = module?.name === 'top_list' && (module?.title || module?.module_title);
  const showTabList = children.length > 1;
  const showModuleIntro = module.module_introduction;
  const tabHeaderClass = `${styles?.tabsHeader} ${!HeaderComp ? styles?.tabsOnly || '' : ''} ${
    styles[headerClass] || ''
  } ${tabsAlign === 'right' ? styles?.invertOrder || '' : ''}`;

  return (
    <>
      <div className={tabHeaderClass || ''}>
        <div
          className={`${styles?.titleAndTab || ''} ${
            moduleStyle ? styles[moduleStyle] || '' : ''
          } ${isHomepageFirstModule ? styles?.isHomepageFirstModule || '' : ''}`}
        >
          {showTitle && (
            <Title
              module={module}
              moduleStyle={moduleStyle}
              isHomepageFirstModule={isHomepageFirstModule}
            />
          )}
          {showTabList && (
            <TabList
              siteName={siteName}
              title={module.title}
              onClick={(tabId) => {
                setActiveTab(tabId);
              }}
              items={children}
              activeTab={activeTab}
              activeTabClass={activeTabClass}
              showAll={showAll}
              alignRight={tabsAlign === 'right'}
              module={module}
              gtmClass={gtmClass}
              showIcon={showIcon}
              icon={icon}
              showNumberOfResults={showNumberOfResults}
              totalResults={totalResults}
            />
          )}
          {showAffiliateDisclaimer && <AffiliateDisclaimer className={styles.disclaimer || ''} />}
        </div>
        {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
      </div>
      {showModuleIntro && (
        <ModuleIntro
          module={{ value: module.module_introduction }}
          isHomepageFirstModule={isHomepageFirstModule}
        />
      )}
      <div className="tab-content">
        {children.map(
          (child, index) =>
            child !== null &&
            (`${child.props.label}_${showAll ? index + 1 : index}` === activeTab ||
              activeTab === showAllTabId) &&
            child.props.children
        )}
      </div>
    </>
  );
};

Tabs.defaultProps = {
  showAll: null,
};

Tabs.propTypes = {
  children: PropTypes.arrayOf(PropTypes.any).isRequired,
  showAll: PropTypes.string,
  tabsAlign: PropTypes.string,
  activeTabClass: PropTypes.string,
  HeaderComp: PropTypes.objectOf(PropTypes.any),
  headerClass: PropTypes.string,
  module: PropTypes.shape({}),
  siteName: PropTypes.string,
  gtmClass: PropTypes.string,
  moduleStyle: PropTypes.string,
  isHomepageFirstModule: PropTypes.bool,
  showAffiliateDisclaimer: PropTypes.bool,
  showIcon: PropTypes.bool,
  icon: PropTypes.func,
  showNumberOfResults: PropTypes.bool,
  totalResults: PropTypes.number,
};

export default Tabs;
