/* eslint-disable arrow-body-style */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
import { formatDate } from '~helpers/date-time';
import { translate, imagePrettyUrl } from '~helpers/getters';
import Link from '~hooks/link';
import LazyImage from '~hooks/lazy-image';
import { Context } from '~context/MainProvider';
import Collapse from '~atoms/collapse';
import ContributorsIcon from '../../../images/icons/contributors';
import styles from './review-credits.module.scss';

const ReviewCredits = ({
  author,
  authorImageWidth = 48,
  authorImageHeight = 48,
  clock = '../../../images/clock.svg',
  date,
  dateFormat = 'DD.MM.YYYY',
  editorialIcon = <IoOpenOutline size={18} />,
  editorialContent = (
    <div className={styles.content}>
      According to our <a href="/">Editorial Guide</a>
    </div>
  ),
  hasAuthorBox = false,
  initOpen = false,
  onlyMobile = true,
  onlyDesktop = true,
  prefix = '',
  readingTime,
  reviewer,
  showEditorialGuide = true,
  showPrefix = false,
  showReadingTimeText = false,
  showAuthorTitle = true,
  showReviewerTitle = true,
  showVerification = true,
  splitDateFormat = '.',
  type = 'default',
  verifyIcon = '../../../images/verifiedAuthor.svg',
}) => {
  const { translations } = useContext(Context) || {};

  const getPrefixBasedOnPage = type.includes('review')
    ? translate(translations, 'reviewed_by_page', 'This page is reviewed by')
    : translate(translations, 'written_by_page', 'This page is written by');
  const formatedDate = date && formatDate(date, dateFormat, splitDateFormat, 'en-GB');

  const {
    name: authorName,
    author_title: authorTitle,
    image: authorImg,
    profile_page_path: authorLink,
  } = author || {};
  const {
    name: reviewerName,
    author_title: reviewerTitle,
    image: reviewerImg,
    profile_page_path: reviewerLink,
  } = reviewer || {};

  const contentText = (
    <div className={styles.reviewCredits || ''}>
      {showEditorialGuide && (
        <div className={styles.editorial || ''}>
          {editorialContent}
          {editorialIcon}
        </div>
      )}
      {(author || reviewer) && (
        <div className={styles.people || ''}>
          {author && (
            <>
              {showPrefix && (
                <span className={`${styles.prefixCommon} ${styles.authorPrefix}`}>
                  {translate(translations, prefix, prefix) || getPrefixBasedOnPage}
                </span>
              )}
              <div className={`${styles.authorCommon || ''} ${styles.author}`}>
                {authorImg && (
                  <LazyImage
                    alt={authorName}
                    loading="eager"
                    width={authorImageWidth}
                    height={authorImageHeight}
                    src={imagePrettyUrl(authorImg, authorImageWidth, authorImageHeight)}
                  />
                )}
                <div className={styles.authorDataContainer}>
                  <Link to={authorLink} title={authorName} className={styles.authorName}>
                    {authorName}
                  </Link>
                  {showAuthorTitle && <span className={styles.authorTitle}>{authorTitle}</span>}
                </div>
              </div>
            </>
          )}
          {reviewer && (
            <>
              {showPrefix && (
                <span className={`${styles.prefixCommon} ${styles.reviewerPrefix}`}>{`${translate(
                  translations,
                  'fact_checked_by',
                  'Fact checked by'
                )}`}</span>
              )}
              <div className={`${styles.authorCommon || ''} ${styles.reviewer}`}>
                {reviewerImg && (
                  <LazyImage
                    alt={reviewerName}
                    loading="eager"
                    width={authorImageWidth}
                    height={authorImageHeight}
                    src={imagePrettyUrl(reviewerImg, authorImageWidth, authorImageHeight)}
                  />
                )}
                <div className={styles.authorDataContainer}>
                  <Link to={reviewerLink} title={reviewerName} className={styles.authorName}>
                    {reviewerName}
                  </Link>
                  {showReviewerTitle ? (
                    <span className={styles.authorTitle}>{reviewerTitle}</span>
                  ) : (
                    <span className={styles.reviewerTitle}>
                      {showVerification && (
                        <LazyImage
                          src={verifyIcon}
                          alt={translate(translations, 'verified', 'Verified')}
                          width={15}
                          height={15}
                        />
                      )}
                      {translate(translations, 'fact_checker', 'Fact-checker')}
                    </span>
                  )}
                </div>
              </div>
            </>
          )}
        </div>
      )}
      {(readingTime || date) && (
        <div className={styles.readtimeDate || ''}>
          {readingTime && (
            <div className={styles.readingWithBorder || ''}>
              <img width={14} height={14} className={styles.clock || ''} src={clock} alt="clock" />
              {showReadingTimeText && (
                <span className={styles.readingTimeText}>
                  {translate(translations, 'reading_time', 'Reading time')}
                </span>
              )}
              {` ${readingTime} ${translate(translations, 'minutes', 'min')}`}
              {!showReadingTimeText && (
                <span className={styles.readText || ''}>
                  {translate(translations, 'read', 'read')}
                </span>
              )}
            </div>
          )}
          {date && (
            <div className={styles.dateTimeWrapper || ''}>
              <span>{translate(translations, 'published_on', 'Published on')}</span>
              {` `}
              {hasAuthorBox ? (
                <a href="#authorbox" className={styles.dateLink || ''}>
                  {formatedDate}
                </a>
              ) : (
                <span className={styles.noLink || ''}>{formatedDate}</span>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );

  const buttonText = (
    <>
      <ContributorsIcon />
      {translate(translations, 'contributors', 'About this page')}
    </>
  );

  return (
    <div className={styles.authorWraper || ''}>
      <Collapse
        onlyMobile={onlyMobile}
        onlyDesktop={onlyDesktop}
        buttonText={buttonText}
        contentText={contentText}
        initOpen={initOpen}
      />
    </div>
  );
};

ReviewCredits.propTypes = {
  author: PropTypes.shape({
    name: PropTypes.string,
    author_title: PropTypes.string,
    image: PropTypes.string,
    profile_page_path: PropTypes.string,
  }).isRequired,
  authorImageHeight: PropTypes.number,
  authorImageWidth: PropTypes.number,
  clock: PropTypes.string,
  date: PropTypes.string,
  dateFormat: PropTypes.string,
  editorialIcon: PropTypes.element,
  editorialContent: PropTypes.element,
  hasAuthorBox: PropTypes.bool,
  initOpen: PropTypes.bool,
  onlyMobile: PropTypes.bool,
  onlyDesktop: PropTypes.bool,
  prefix: PropTypes.string,
  readingTime: PropTypes.number,
  reviewer: PropTypes.shape({
    profile_page_path: PropTypes.string,
    name: PropTypes.string,
    image: PropTypes.string,
  }),
  showEditorialGuide: PropTypes.bool,
  showPrefix: PropTypes.bool,
  showReadingTimeText: PropTypes.bool,
  showAuthorTitle: PropTypes.bool,
  showReviewerTitle: PropTypes.bool,
  showVerification: PropTypes.bool,
  splitDateFormat: PropTypes.string,
  type: PropTypes.string,
  verifyIcon: PropTypes.string,
};

export default ReviewCredits;
