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

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 styles from './author.module.scss';

const Author = ({
  name,
  date,
  authorImg,
  readingTime,
  link,
  prefix = '',
  type = 'default',
  icon = false,
  splitDateFormat = '.',
  dateFormat = 'DD.MM.YYYY',
  isCardsAuthor = false,
  hasAuthorBox = false,
  reviewer,
  clock = '../../../images/clock.svg',
  authorImageWidth = 30,
  authorImageHeight = 30,
  showVerification = false,
  verifyIcon = '../../../images/verify.svg',
}) => {
  const { translations } = useContext(Context) || {};
  const prefixstyle = !link || !authorImg;

  const getPrefixBasedOnPage = type.includes('review')
    ? translate(translations, 'reviewed_by', 'Review by')
    : translate(translations, 'written_by', 'Written by');

  const formatedDate = date && formatDate(date, dateFormat, splitDateFormat, 'en-GB');

  return (
    <div
      className={`${styles.authorWraper || ''} ${isCardsAuthor && (styles.authorCard || '')} ${
        styles.authorSeparator || ''
      }`}
    >
      {name && (
        <div
          className={`${styles.infoContainer || ''} ${
            isCardsAuthor && (styles.infoCardContainer || '')
          }`}
        >
          <p
            className={`${styles.prefixStyle || ''} ${
              (prefixstyle && styles.prefixCardText) || ''
            }`}
          >
            <span>{translate(translations, prefix, prefix) || getPrefixBasedOnPage}</span>
          </p>
          <Link to={link} title={name}>
            {name}
          </Link>
          {icon}
          {authorImg && (
            <div className={styles.authorImgContainer}>
              <LazyImage
                alt={name}
                loading="eager"
                width={authorImageWidth}
                height={authorImageHeight}
                src={imagePrettyUrl(authorImg, authorImageWidth, authorImageHeight)}
              />
              {showVerification && (
                <span>
                  <LazyImage
                    src={verifyIcon}
                    alt={translate(translations, 'verified', 'Verified')}
                    width={10}
                    height={10}
                  />
                </span>
              )}
            </div>
          )}
        </div>
      )}
      {reviewer && !isCardsAuthor && (
        <div className={date && (styles.reviewer || '')}>
          <span>{`${translate(translations, 'fact_checked_by', 'Fact checked by')}`}</span>
          {` `}
          <Link to={reviewer.profile_page_path} title={reviewer.name}>
            {reviewer.name}
          </Link>
        </div>
      )}
      {readingTime && !isCardsAuthor && (
        <div className={styles.readingWithBorder || ''}>
          <img width={14} height={14} className={styles.clock || ''} src={clock} alt="clock" />
          <span className={styles.readingTimeText}>
            {translate(translations, 'reading_time', 'Reading time')}
          </span>
          {` ${readingTime} ${translate(translations, 'minutes', 'min')}`}
          <span className={styles.readText || ''}>{translate(translations, 'read', 'read')}</span>
        </div>
      )}
      {date && (
        <div className={styles.dateTimeWrapper || ''}>
          {!isCardsAuthor && <span>{translate(translations, 'published_on', 'Published on')}</span>}
          {` `}
          {hasAuthorBox ? (
            <a href="#authorbox" className={!isCardsAuthor && (styles.dateLink || '')}>
              {formatedDate}
            </a>
          ) : (
            <span className={styles.noLink || ''}>{formatedDate}</span>
          )}
        </div>
      )}
    </div>
  );
};

Author.propTypes = {
  prefix: PropTypes.string,
  name: PropTypes.string.isRequired,
  date: PropTypes.string,
  dateFormat: PropTypes.string,
  type: PropTypes.string,
  link: PropTypes.string,
  authorImg: PropTypes.string,
  readingTime: PropTypes.string,
  icon: PropTypes.string,
  splitDateFormat: PropTypes.string,
  isCardsAuthor: PropTypes.bool,
  hasAuthorBox: PropTypes.bool,
  reviewer: PropTypes.shape({
    profile_page_path: PropTypes.string,
    name: PropTypes.string,
  }),
  clock: PropTypes.string,
  authorImageHeight: PropTypes.number,
  authorImageWidth: PropTypes.number,
  showVerification: PropTypes.bool,
  verifyIcon: PropTypes.string,
};

export default Author;
