/* 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 } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import Collapse from '~atoms/collapse';
import Author from '../author/template-three';
import ContributorsIcon from '../../../images/icons/contributors';
import FactCheckIcon from '../../../images/icons/fact-check';
import styles from './review-credits.module.scss';

const ReviewCredits = ({
  authors,
  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 = <FactCheckIcon width={15} height={15} />,
}) => {
  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: 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>
      )}
      {(authors?.length || reviewer) && (
        <div className={styles.people || ''}>
          {authors &&
            authors?.map((author) => {
              const {
                name: authorName,
                author_title: authorTitle,
                image: authorImg,
                profile_page_path: authorLink,
              } = author || {};

              return (
                <Author
                  authorImage={authorImg}
                  authorImageHeight={authorImageHeight}
                  authorImageWidth={authorImageWidth}
                  authorName={authorName}
                  authorPath={authorLink}
                  authorTitle={authorTitle}
                  prefix={translate(translations, prefix, prefix) || getPrefixBasedOnPage}
                  customStyles={`${styles.authorCommon || ''} ${styles.author || ''}`}
                  showPrefix={showPrefix}
                  showTitle={showAuthorTitle}
                  verify={verifyIcon}
                  type={type}
                />
              );
            })}
          {reviewer && (
            <Author
              authorImage={reviewerImg}
              authorImageHeight={authorImageHeight}
              authorImageWidth={authorImageWidth}
              authorName={reviewerName}
              authorPath={reviewerLink}
              authorTitle={reviewerTitle}
              isReviewer
              prefix={prefix}
              customStyles={`${styles.authorCommon || ''} ${styles.reviewer || ''}`}
              showPrefix={showPrefix}
              showTitle={showReviewerTitle}
              showVerification={showVerification}
              type={type}
            />
          )}
        </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 = {
  authors: PropTypes.arrayOf(
    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.element,
};

export default ReviewCredits;
