/* eslint-disable no-nested-ternary */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import styles from './module-title.module.scss';
import SeeMore from '../../../../components/atoms/see-more';

const ModuleTitle = ({
  module,
  viewMoreIcon = <FaAngleRight title="Right-pointing Arrow Icon" />,
  pageContext = null,
  isHomepageFirstModule = false,
  anchorLabel = null,
  showMoreLink = true,
}) => {
  const tabsToplist = module?.items?.length > 1 && module?.name === 'top_list';
  const CustomTag = `${module.module_title_tag}`;
  const monthNames = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ];
  const { translations } = useContext(Context) || {};
  const d = new Date();
  const year = d.getFullYear();
  const month = monthNames[d.getMonth()];
  const currentMonth = module.show_last_updated_date
    ? translate(translations, month, month)
    : false;

  const getTitle = (className) => {
    const moduleTitle = module?.title || module?.module_title;
    if (!module?.module_title_tag && moduleTitle) {
      return (
        <h2 id={anchorLabel} className={`${styles?.noTag || ''} ${className || ''}`}>
          {moduleTitle}
          {currentMonth ? (
            <span className={styles?.toplistDate || ''}>
              <small>•</small>
              {`${currentMonth} ${year}`}
            </span>
          ) : null}
        </h2>
      );
    }

    if (module.module_title_tag)
      return (
        <CustomTag id={anchorLabel} className={className || ''}>
          {moduleTitle}
          {currentMonth ? (
            <span className={styles?.toplistDate || ''}>
              <small>•</small>
              {`${currentMonth} ${year}`}
            </span>
          ) : null}
        </CustomTag>
      );

    return (
      moduleTitle && (
        <span id={anchorLabel} className={`${styles?.noTag || ''} ${className || ''}`}>
          {moduleTitle}
          {currentMonth ? (
            <span className={styles?.toplistDate || ''}>
              <small>•</small>
              {`${currentMonth} ${year}`}
            </span>
          ) : null}
        </span>
      )
    );
  };

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

  return module.module_title ||
    (module.title && (module.name === 'cards' || module.name === 'top_list')) ? (
    module.see_more_link?.value ? (
      <div
        className={`${styles?.moduleTitle || ''} ${styles[type] || ''} ${styles[template] || ''} ${
          module?.style ? styles[module.style] || '' : ''
        } ${tabsToplist ? styles.tabsToplist || '' : ''} ${
          isHomepageFirstModule ? styles?.homepageFirstModule || '' : ''
        }`}
      >
        {(module?.title || module.module_title) && getTitle(styles.toplistTitle)}

        <SeeMore module={module} showMoreLink={showMoreLink} viewMoreIcon={viewMoreIcon} />
      </div>
    ) : (
      (module?.title || module.module_title) &&
      getTitle(
        `${styles?.moduleTitle || ''} ${styles[template] || ''} ${
          module?.style ? styles[module.style] || '' : ''
        } ${styles?.toplistTitle || ''} ${tabsToplist ? styles?.tabsToplist || '' : ''} ${
          isHomepageFirstModule ? styles?.homepageFirstModule || '' : ''
        }`
      )
    )
  ) : (
    <></>
  );
};

ModuleTitle.propTypes = {
  anchorLabel: PropTypes.string,
  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,
    items: PropTypes.shape({
      length: PropTypes.number,
    }),
    show_last_updated_date: PropTypes.string,
    title: PropTypes.string,
  }),
  viewMoreIcon: PropTypes.element,
  pageContext: PropTypes.shape({}),
  translations: PropTypes.shape({}),
  isHomepageFirstModule: PropTypes.bool,
  showMoreLink: PropTypes.bool,
};

export default ModuleTitle;
