/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
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 { formatDate } from '~helpers/date-time';

import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './template-six.module.scss';

const TemplateSix = ({
  item,
  width = 277,
  height = 277,
  showDate = false,
  showAuthorAsLink = false,
  verifyIcon = '',
  showImageAsLink = false,
  showByLabel = false,
}) => {
  const { title, path, relation, author } = item;
  const date = item?.updated_at || item?.created_at;
  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');

  const defaultImg = (
    <LazyImage width={width} height={height} src="/images/default-article.jpg" alt={title} />
  );

  const imageElement = (
    <LazyImage
      width={width}
      height={height}
      defaultImg={defaultImg}
      src={
        relation?.logo?.filename
          ? imagePrettyUrl(relation?.logo?.filename, width, height)
          : undefined
      }
      alt={title}
    />
  );
  return (
    <div className={styles.article || ''}>
      {showImageAsLink ? (
        <Link
          to={path}
          className={`${styles.image || ''} article-card-gtm`}
          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
        >
          {imageElement}
          {imageElement}
        </Link>
      ) : (
        <div className={styles.image || ''}>
          {imageElement}
          {imageElement}
        </div>
      )}
      <>
        <Link to={path} className={styles?.cardTitle || ''}>
          {title}
        </Link>
        {typeof author === 'object' && (
          <div className={styles?.showAuthorOnOneLine}>
            {!!author?.image && (
              <div className={styles.authorImages}>
                <LazyImage
                  alt={author?.name}
                  width={40}
                  height={40}
                  src={imagePrettyUrl(author?.image, 40, 40)}
                />
                {verifyIcon && verifyIcon}
              </div>
            )}
            <div className={styles.authorContainer}>
              {showByLabel && (
                <p>
                  <span className={styles.byText}>{useTranslate('by', 'By')}</span>
                </p>
              )}
              {showAuthorAsLink ? (
                <Link to={author?.profile_page_path} title={author?.name}>
                  {author?.name}
                </Link>
              ) : (
                <span className={styles.authorName}>{author?.name}</span>
              )}
              {showDate && <span className={styles?.noLink || ''}>{formatedDate}</span>}
            </div>
          </div>
        )}
      </>
    </div>
  );
};

TemplateSix.propTypes = {
  item: PropTypes.shape({
    author: PropTypes.shape({
      name: PropTypes.string,
      profile_page_path: PropTypes.string,
      twitter_profile: PropTypes.string,
      image: PropTypes.string,
    }),
    relation: PropTypes.shape({
      logo: PropTypes.shape({
        filename: PropTypes.string,
      }),
    }),
    title: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    path: PropTypes.string,
    banner: PropTypes.string,
    reading_time: PropTypes.string,
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  showDate: PropTypes.bool,
  showAuthorAsLink: PropTypes.bool,
  verifyIcon: PropTypes.string,
  showImageAsLink: PropTypes.bool,
  showByLabel: PropTypes.bool,
};

export default TemplateSix;
