/* eslint-disable arrow-body-style */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
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 styles from './review-credits.module.scss';

const ReviewCredits = ({
  author,
  authorImageWidth = 48,
  authorImageHeight = 48,
  buttonIcon = '../../../images/authorship.svg',
  clock = '../../../images/clock.svg',
  date,
  dateFormat = 'DD.MM.YYYY',
  editorialIcon = <IoOpenOutline size={18} />,
  editorialLink = '/',
  editorialLinkText = 'Editorial Guide',
  editorialText = 'According to our',
  hasAuthorBox = false,
  initOpen = false,
  onlyMobile = true,
  onlyDesktop = true,
  readingTime,
  reviewer,
  showEditorialGuide = true,
  showReadingTimeText = false,
  showVerification = true,
  splitDateFormat = '.',
  verifyIcon = '../../../images/verifiedAuthor.svg',
}) => {
  const { translations } = useContext(Context) || {};

  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,
    image: reviewerImg,
    profile_page_path: reviewerLink,
  } = reviewer || {};

  const contentText = (
    <div className={styles.reviewCredits || ''}>
      {showEditorialGuide && (
        <div className={styles.editorial || ''}>
          {editorialText && editorialText}
          <Link to={editorialLink} title={editorialLinkText}>
            {editorialLinkText}
          </Link>
          {editorialIcon}
        </div>
      )}
      {(author || reviewer) && (
        <div className={styles.people || ''}>
          {author && (
            <Link to={authorLink} title={authorName}>
              {authorImg && (
                <LazyImage
                  alt={authorName}
                  loading="eager"
                  width={authorImageWidth}
                  height={authorImageHeight}
                  src={imagePrettyUrl(authorImg, authorImageWidth, authorImageHeight)}
                />
              )}
              <div className={styles.author}>
                <h3>{authorName}</h3>
                <span className={styles.authorTitle}>{authorTitle}</span>
              </div>
              <FaArrowRight />
            </Link>
          )}
          {reviewer && (
            <Link to={reviewerLink} title={reviewerName}>
              {reviewerImg && (
                <LazyImage
                  alt={reviewerName}
                  loading="eager"
                  width={authorImageWidth}
                  height={authorImageHeight}
                  src={imagePrettyUrl(reviewerImg, authorImageWidth, authorImageHeight)}
                />
              )}
              <div className={styles.author}>
                <h3>{reviewerName}</h3>
                <span className={styles.reviewerTitle}>
                  {showVerification && (
                    <LazyImage
                      src={verifyIcon}
                      alt={translate(translations, 'verified', 'Verified')}
                      width={15}
                      height={15}
                    />
                  )}
                  {translate(translations, 'fact_checked_by', 'Fact-checker')}
                </span>
              </div>
              <FaArrowRight />
            </Link>
          )}
        </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 = (
    <>
      {buttonIcon && (
        <LazyImage
          src={buttonIcon}
          alt={translate(translations, 'contributors', 'contributors icon')}
          width={18}
          height={14}
        />
      )}
      {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,
  buttonIcon: PropTypes.string,
  clock: PropTypes.string,
  date: PropTypes.string,
  dateFormat: PropTypes.string,
  editorialIcon: PropTypes.element,
  editorialLink: PropTypes.string,
  editorialLinkText: PropTypes.string,
  editorialText: PropTypes.string,
  hasAuthorBox: PropTypes.bool,
  initOpen: PropTypes.bool,
  onlyMobile: PropTypes.bool,
  onlyDesktop: PropTypes.bool,
  readingTime: PropTypes.number,
  reviewer: PropTypes.shape({
    profile_page_path: PropTypes.string,
    name: PropTypes.string,
    image: PropTypes.string,
  }),
  showEditorialGuide: PropTypes.bool,
  showReadingTimeText: PropTypes.bool,
  showVerification: PropTypes.bool,
  splitDateFormat: PropTypes.string,
  verifyIcon: PropTypes.string,
};

export default ReviewCredits;
