import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
import styles from './author-details.module.scss';
import LazyImage from '~hooks/lazy-image';
import socialIcons from '../icons/socialIcons';
import FactCheckIcon from '../../../../images/icons/fact-check';
import { Context } from '~context/MainProvider';

export default function AuthorDetails({
  author,
  width = 180,
  height = 180,
  verifiedIconWidth = 14,
  verifiedIconHeight = 14,
  template = '',
  ribbon = false,
  extraInfo = false,
}) {
  const { translations } = useContext(Context) || {};
  return (
    <div className={`${styles.details || ''} ${styles[template]}`}>
      {author?.image_object && (
        <LazyImage
          src={imagePrettyUrl(author?.image_object.filename, width, height)}
          alt={getAltText(author?.image_object, author?.image_alt || author?.name)}
          width={width}
          height={height}
        />
      )}
      <div className={styles.information || ''}>
        <p className={styles.name || ''}>
          <span>{author?.name}</span>
          <FactCheckIcon width={verifiedIconWidth} height={verifiedIconHeight} color="#457BF9" />
        </p>
        <div className={styles.ribbonAndExpert}>
          {author?.author_title && <p className={styles.title || ''}>{author?.author_title}</p>}
          {author?.ribbon_label && ribbon && (
            <div className={styles.ribbon || ''}>{author?.ribbon_label}</div>
          )}
        </div>
        {socialIcons(author).length > 0 && (
          <p className={styles.socialIcons || ''}>
            {socialIcons(author)
              .filter((socialLink) => socialLink.link)
              .map((filteredLinks) => (
                // eslint-disable-next-line jsx-a11y/control-has-associated-label
                <a
                  href={filteredLinks.link}
                  className="author-gtm"
                  target="_blank"
                  rel="nofollow noreferrer"
                  key={`author-box-link-${filteredLinks.id}`}
                  aria-label={`${filteredLinks.id} Link`}
                >
                  {filteredLinks.icon}
                </a>
              ))}
          </p>
        )}
        {extraInfo && (author?.experience || author?.pages_count) && (
          <div className={styles.authorStats}>
            {author?.pages_count && (
              <p>
                <span>{author?.pages_count}</span>
                {translate(translations, 'written_articles', 'Written articles')}
              </p>
            )}
            {author?.experience && <p>{author?.experience}</p>}
          </div>
        )}
      </div>
    </div>
  );
}

AuthorDetails.propTypes = {
  author: PropTypes.shape({
    image_object: PropTypes.shape({
      filename: PropTypes.string,
    }),
    image_alt: PropTypes.string,
    name: PropTypes.string,
    author_title: PropTypes.string,
    ribbon_label: PropTypes.string,
    experience: PropTypes.string,
    pages_count: PropTypes.string,
  }),
  width: PropTypes.number,
  height: PropTypes.number,
  verifiedIconWidth: PropTypes.number,
  verifiedIconHeight: PropTypes.number,
  socialIcons: PropTypes.shape({}),
  template: PropTypes.string,
  ribbon: PropTypes.bool,
  extraInfo: PropTypes.bool,
};
