import React from 'react';
import PropTypes from 'prop-types';
import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';

import Link from '~hooks/link';
import styles from './module-title.module.scss';

const ModuleTitle = ({
  module,
  viewMoreIcon = <FaAngleRight title="Right-pointing Arrow Icon" />,
  pageContext = null,
  anchorLabel = null,
}) => {
  const getTitle = (classname = '') => {
    if (module.module_title_tag === 'h2') return <h2 id={anchorLabel}>{module.module_title}</h2>;
    if (module.module_title_tag === 'h3') return <h3 id={anchorLabel}>{module.module_title}</h3>;
    if (module.module_title_tag === 'h4') return <h4 id={anchorLabel}>{module.module_title}</h4>;
    if (module.module_title_tag === 'h5') return <h5 id={anchorLabel}>{module.module_title}</h5>;
    if (module.module_title_tag === 'h6') return <h6 id={anchorLabel}>{module.module_title}</h6>;
    return (
      <h2 className={`${styles?.noTag || ''} ${classname || ''}`} id={anchorLabel}>
        {module.module_title}
      </h2>
    );
  };

  const type = pageContext && pageContext?.page?.relation_type;

  if (module.module_title && module.see_more_link) {
    return (
      <div
        className={`${styles.moduleTitle || ''} ${styles[type] || ''}  ${
          module?.style ? styles[module.style] : ''
        }`}
      >
        {getTitle(module)}

        {module.see_more_link?.value && module.see_more_link.type === 'page' && (
          <Link
            to={module.see_more_link?.path}
            className={`${styles.viewMore || ''} module-title-gtm`}
          >
            {module.see_more_link?.title}
            {viewMoreIcon}
          </Link>
        )}
        {module.see_more_link?.value && module.see_more_link.type === 'external' && (
          <a
            href={module.see_more_link?.path}
            rel="nofollow"
            className={`${styles.viewMore || ''} module-title-gtm`}
          >
            {module.see_more_link?.title}
            {viewMoreIcon}
          </a>
        )}
      </div>
    );
  }

  if (module.module_title && !module.see_more_link?.value) {
    return (
      module.module_title &&
      getTitle(
        `${styles?.moduleTitle || ''} ${styles[type] || ''}  ${
          module?.style ? styles[module.style] : ''
        }`
      )
    );
  }
};

ModuleTitle.propTypes = {
  module: PropTypes.shape({
    module_title: PropTypes.string,
    module_title_tag: PropTypes.string,
    see_more_link: PropTypes.shape({
      path: PropTypes.string,
      value: PropTypes.number,
      title: PropTypes.string,
      type: PropTypes.string,
    }),
    name: PropTypes.string,
    style: PropTypes.string,
  }),
  viewMoreIcon: PropTypes.element,
  pageContext: PropTypes.shape({}),
  anchorLabel: PropTypes.string,
};

export default ModuleTitle;
