/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
import styles from './styles.module.scss';
import ModuleTitle from '../../../../gatsby-core-theme/components/atoms/module-title';

import { removeSymbols } from '../../../../helpers/strings';
import SeeMore from '../../../atoms/see-more';

const ModuleIntroduction = ({ module, showSeeMore = false }) => {
  const anchorLabel = module?.anchor_label && removeSymbols(anchorLink(module?.anchor_label));

  const ModuleIntro =
    module?.module_introduction && module?.module_introduction !== '<p></p>'
      ? loadable(() => import('~molecules/content'))
      : null;

  return (
    <div className={ModuleIntro ? '' : styles.noIntroModuleCards}>
      <ModuleTitle
        module={module}
        anchorLabel={module.name === 'archive' && anchorLabel}
        showMoreLink={!ModuleIntro}
      />
      {ModuleIntro && (
        <ModuleIntro
          isModuleIntroduction={module?.module_introduction}
          module={{ value: module?.module_introduction }}
        />
      )}
      {showSeeMore && ModuleIntro && <SeeMore module={module} />}
    </div>
  );
};

ModuleIntroduction.propTypes = {
  module: PropTypes.shape({
    anchor_label: PropTypes.string,
    name: PropTypes.string.isRequired,
    module_introduction: PropTypes.string,
    see_more_link: PropTypes.shape({
      path: PropTypes.string,
      title: PropTypes.string,
    }),
  }),
  showSeeMore: PropTypes.bool,
};

export default ModuleIntroduction;
