import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Link from 'gatsby-core-theme/src/hooks/link';
import { Context } from '~context/MainProvider';
import FactCheckIcon from '../../../../images/icons/fact-check';
import styles from './template-three.module.scss';

const AuthorTemplateThree = ({
  authorImage,
  authorImageHeight = 48,
  authorImageWidth = 48,
  authorName,
  authorPath,
  authorTitle,
  customStyles,
  isReviewer = false,
  prefix,
  showLinks = true,
  showPrefix = false,
  showTitle = true,
  showVerification = true,
  type,
  verify = <FactCheckIcon width={15} height={15} />,
}) => {
  const { translations } = useContext(Context) || {};

  const getPrefixBasedOnPage = type?.includes('review')
    ? translate(translations, 'reviewed_by', 'Review by')
    : translate(translations, 'written_by', 'Written by');

  const getAuthorTitle = <span className={styles.authorTitle}>{authorTitle}</span>;

  return (
    <>
      {showPrefix && (
        <span className={styles.prefix || ''}>
          {isReviewer
            ? translate(translations, 'fact_checked_by', 'Fact checked by')
            : translate(translations, prefix, prefix) || getPrefixBasedOnPage}
        </span>
      )}
      <div className={`${styles.authorContainer || ''} ${customStyles || ''}`}>
        {authorImage && (
          <LazyImage
            alt={authorName}
            loading="eager"
            width={authorImageWidth}
            height={authorImageHeight}
            src={imagePrettyUrl(authorImage, authorImageWidth, authorImageHeight)}
          />
        )}
        <div className={styles.authorDataContainer || ''}>
          {showLinks ? (
            <Link to={authorPath} title={authorName} className={styles.authorName}>
              {authorName}
            </Link>
          ) : (
            <p>{authorName}</p>
          )}

          {showTitle && !isReviewer && getAuthorTitle}
          {isReviewer &&
            (showTitle ? (
              getAuthorTitle
            ) : (
              // eslint-disable-next-line jsx-a11y/label-has-associated-control
              <label className={styles.reviewerTitle}>
                {showVerification && verify}
                {translate(translations, 'fact_checker', 'Fact-checker')}
              </label>
            ))}
        </div>
      </div>
    </>
  );
};

AuthorTemplateThree.propTypes = {
  authorImage: PropTypes.string,
  authorImageHeight: PropTypes.bool,
  authorImageWidth: PropTypes.bool,
  authorName: PropTypes.string,
  authorPath: PropTypes.string,
  authorTitle: PropTypes.string,
  customStyles: PropTypes.string,
  prefix: PropTypes.string,
  isReviewer: PropTypes.bool,
  showLinks: PropTypes.bool,
  showPrefix: PropTypes.bool,
  showTitle: PropTypes.bool,
  showVerification: PropTypes.bool,
  type: PropTypes.string,
  verify: PropTypes.element,
};

export default AuthorTemplateThree;
