/* eslint-disable arrow-body-style */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
import { formatDate } from '~helpers/date-time';
import useTranslate from '~hooks/useTranslate/useTranslate';
import Collapse from '~atoms/collapse';
import Author from '../author/template-three';
import styles from './review-credits.module.scss';

const ContributorsIcon = lazy(() => import('../../../images/icons/contributors'));
const FactCheckIcon = lazy(() => import('~images/icons/fact-check'));
const Clock = lazy(() => import('~images/icons/clock'));

const ReviewCredits = ({
  authors,
  authorImageWidth = 48,
  authorImageHeight = 48,
  clock = <Suspense fallback={<></>}><Clock /></Suspense>,
  date,
  dateFormat = 'DD.MM.YYYY',
  showLinks=true,
  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,
  showMultiAuthorPrefix = false,
  showReadingTimeText = false,
  showAuthorTitle = true,
  showReviewerTitle = true,
  showVerification = true,
  splitDateFormat = '.',
  type = 'default',
  verifyIcon = <Suspense fallback={<></>}><FactCheckIcon width={15} height={15} /></Suspense>,
  incommingClass='',
}) => {
  const getPrefixBasedOnPage = type.includes('review')
    ? useTranslate('reviewed_by_page', 'This page is reviewed by')
    : useTranslate('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 || ''}>
      {(authors?.length || reviewer) && (
        <div className={styles.people || ''}>
          {(authors.length && showMultiAuthorPrefix) && (
            <span className={styles.prefix || ''}>
              {useTranslate(prefix, prefix) || getPrefixBasedOnPage}
            </span>
          )}
          {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={showLinks && authorLink}
                  authorTitle={authorTitle}
                  prefix={useTranslate(prefix, prefix) || getPrefixBasedOnPage}
                  customStyles={`${styles.authorCommon || ''} ${styles.author || ''}`}
                  showPrefix={!showMultiAuthorPrefix && showPrefix}
                  showTitle={showAuthorTitle}
                  verify={verifyIcon}
                  type={type}
                />
              );
            })}
          {reviewer && (
            <Author
              authorImage={reviewerImg}
              authorImageHeight={authorImageHeight}
              authorImageWidth={authorImageWidth}
              authorName={reviewerName}
              authorPath={showLinks && 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 || ''}>
              {clock}
              {showReadingTimeText && (
                <span className={styles.readingTimeText}>
                  {useTranslate('reading_time', 'Reading time')}
                </span>
              )}
              {` ${readingTime} ${useTranslate('minutes', 'min')}`}
              {!showReadingTimeText && (
                <span className={styles.readText || ''}>{useTranslate('read', 'read')}</span>
              )}
            </div>
          )}
          {date && (
            <div className={styles.dateTimeWrapper || ''}>
              <span>{useTranslate('published_on', 'Published on')}</span>
              {` `}
              {hasAuthorBox ? (
                <a href="#authorbox" className={styles.dateLink || ''}>
                  {formatedDate}
                </a>
              ) : (
                <span className={styles.noLink || ''}>{formatedDate}</span>
              )}
            </div>
          )}
        </div>
      )}
      {showEditorialGuide && (
        <div className={styles.editorial || ''}>
          {editorialContent}
          {editorialIcon}
        </div>
      )}
    </div>
  );

  const buttonText = (
    <>
      <Suspense fallback={<></>}><ContributorsIcon /></Suspense>
      {useTranslate('contributors', 'About this page')}
    </>
  );

  return (
    <div className={`${styles.authorWraper || ''} ${incommingClass || ''}`}>
      <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.element,
  date: PropTypes.string,
  showLinks: PropTypes.bool,
  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,
  showMultiAuthorPrefix: PropTypes.bool,
  showReadingTimeText: PropTypes.bool,
  showAuthorTitle: PropTypes.bool,
  showReviewerTitle: PropTypes.bool,
  showVerification: PropTypes.bool,
  splitDateFormat: PropTypes.string,
  type: PropTypes.string,
  verifyIcon: PropTypes.element,
  incommingClass: PropTypes.string,
};

export default ReviewCredits;
