import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-core-theme/src/hooks/link';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { AiOutlineClockCircle } from '@react-icons/all-files/ai/AiOutlineClockCircle';
import { formatDate } from '~helpers/date-time';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './variable.module.scss';

const VariableComponent = ({
  item,
  showAuthorOnOneLine,
  showAuthorAsLink,
  showDate,
  readingTime,
  verifyIcon,
}) => {
  const { author, title, path } = item;

  const imgSize = showAuthorOnOneLine ? 30 : 48;
  const date = item?.updated_at || item?.created_at;
  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');

  return (
    <>
      <Link to={path} className="article-card-gtm">
        <span className={styles?.cardTitle || ''}>{title}</span>
      </Link>
      {typeof author === 'object' && (
        <div
          className={`${
            showAuthorOnOneLine ? styles?.showAuthorOnOneLine || '' : styles?.showAuthorBlock || ''
          } `}
        >
          {!!author?.image && (
            <div className={styles.authorImages}>
              <LazyImage
                alt={author?.name}
                width={imgSize}
                height={imgSize}
                src={imagePrettyUrl(author?.image, imgSize, imgSize)}
              />
              {verifyIcon && verifyIcon}
            </div>
          )}
          <div className={styles.authorContainer}>
            {showAuthorOnOneLine && (
              <p>
                <span>{useTranslate('by', 'By')}</span>
              </p>
            )}
            {showAuthorAsLink ? (
              <Link to={author?.profile_page_path} title={author?.name}>
                {author?.name}
              </Link>
            ) : (
              <span>{author?.name}</span>
            )}
            {showDate && <span className={styles?.noLink || ''}>{formatedDate}</span>}
            {readingTime && (
              <span className={styles?.readingTime || ''}>
                <AiOutlineClockCircle title="Clock Icon" />

                {readingTime}
                <p className={styles.readText || ''}>{useTranslate('readingTime', 'min read')}</p>
              </span>
            )}
          </div>
        </div>
      )}
    </>
  );
};

VariableComponent.propTypes = {
  item: PropTypes.shape({
    author: PropTypes.shape({
      name: PropTypes.string,
      profile_page_path: PropTypes.string,
      twitter_profile: PropTypes.string,
      image: PropTypes.string,
    }),
    title: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    path: PropTypes.string,
    banner: PropTypes.string,
  }).isRequired,
  showAuthorOnOneLine: PropTypes.bool,
  showDate: PropTypes.bool,
  showAuthorAsLink: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  readingTime: PropTypes.any,
  verifyIcon: PropTypes.string,
};

export default VariableComponent;
