/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import styles from './title.module.scss';
import { getDate } from '../../../../helpers/strings';

const TabsTitle = ({ module, moduleStyle, isHomepageFirstModule = false }) => {
  const TitleTag = module?.module_title_tag
    ? `${module?.module_title_tag}`
    : module?.module_title
    ? 'span'
    : 'h2';
  const showDate = module?.show_last_updated_date || false;
  const { translations } = useContext(Context) || {};
  const { month, year } = showDate && getDate();
  const titleText = module?.module_title || module?.title;

  return (
    <TitleTag
      className={`${styles?.noTag || ''} ${(moduleStyle && styles[moduleStyle]) || ''} ${
        isHomepageFirstModule ? styles?.firstModule || '' : ''
      } `}
    >
      {module?.module_title_tag ? (
        <span className={styles?.title || ''}>{titleText}</span>
      ) : (
        titleText
      )}
      {showDate && (
        <span className={styles?.toplistDate || ''}>
          <small>•</small>
          {`${translate(translations, month, month)} ${year}`}
        </span>
      )}
    </TitleTag>
  );
};

TabsTitle.propTypes = {
  isHomepageFirstModule: PropTypes.bool,
  moduleStyle: PropTypes.string,
  module: PropTypes.shape({
    title: PropTypes.string,
    module_title: PropTypes.string,
    module_title_tag: PropTypes.string,
    show_last_updated_date: PropTypes.string,
  }),
};

export default TabsTitle;
