import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from '~context/MainProvider';
import Author from '../../../atoms/author/template-three';
import Socials from '../../../atoms/author/socials';
import FactCheckIcon from '../../../../images/icons/fact-check';
import styles from './contributor.module.scss';

const Contributor = ({
  authorImageWidth = 48,
  authorImageHeight = 48,
  contributor,
  isReviewer,
  showTitle = true,
  verifyIcon = <FactCheckIcon width={15} height={15} />,
}) => {
  const { translations } = useContext(Context) || {};
  const {
    name: authorName,
    author_title: authorTitle,
    image: authorImg,
    profile_page_path: authorLink,
    pages_count: pageCount,
    experience,
    biography,
  } = contributor || {};

  return (
    <div className={styles.contributor || ''}>
      <div className={styles.topContainer || ''}>
        <Author
          authorImage={authorImg}
          authorImageHeight={authorImageHeight}
          authorImageWidth={authorImageWidth}
          authorName={authorName}
          authorTitle={authorTitle}
          authorPath={authorLink}
          isReviewer={isReviewer}
          customStyles={isReviewer ? styles.reviewer || '' : styles.author || ''}
          showTitle={showTitle}
          verify={verifyIcon}
        />
        <Socials className={styles?.socials || ''} author={contributor} />
        {(pageCount || experience) && (
          <div className={styles.statsContainer || ''}>
            {pageCount && (
              <div className={styles.stats || ''}>
                {pageCount}
                <p>
                  {translate(
                    translations,
                    'multiple_contributors_articles_written',
                    'Articles Written'
                  )}
                </p>
              </div>
            )}
            {experience && (
              <div className={styles.stats || ''}>
                {experience}
                <p>
                  {translate(
                    translations,
                    'multiple_contributors_experience',
                    'Years of experience'
                  )}
                </p>
              </div>
            )}
          </div>
        )}
      </div>
      {biography && (
        <div className={styles.bottomContainer || ''}>
          <div
            className={styles?.biography || ''}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: biography }}
          />
        </div>
      )}
    </div>
  );
};

Contributor.propTypes = {
  authorImageWidth: PropTypes.number,
  authorImageHeight: PropTypes.number,
  contributor: PropTypes.shape({}).isRequired,
  isReviewer: PropTypes.bool,
  showTitle: PropTypes.bool,
  verifyIcon: PropTypes.element,
};

export default Contributor;
