/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
import React, { useMemo } 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 VariableComponent from '../variables';

import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './article-card.module.scss';

const ArticleCard = ({
  item,
  width = 360,
  height = 240,
  hasVariableComponent = true,
  showDate = true,
  showAuthorOnOneLine = false,
  showAuthorAsLink = false,
  readingTime = false,
  verifyIcon = '',
  showImageAsLink = true,
  moduleStyle,
}) => {
  const { title, path, banner, reading_time, relation } = item;
  const defaultImg = (
    <LazyImage width={width} height={height} src="/images/default-article.jpg" alt={title} />
  );
  const logo = useMemo(() => {
    if (banner) return imagePrettyUrl(banner, width, height);
    if (relation?.logo?.filename) return imagePrettyUrl(relation?.logo?.filename, width, height);
    return undefined;
  }, [banner, relation, height, width]);
  const imageElement = (
    <LazyImage width={width} height={height} defaultImg={defaultImg} src={logo} alt={title} />
  );
  return (
    <div className={`${styles.article || ''} ${moduleStyle ? styles[moduleStyle] || '' : ''}`}>
      {showImageAsLink ? (
        <Link
          to={path}
          className={`${styles.image || ''} article-card-gtm`}
          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
        >
          {imageElement}
        </Link>
      ) : (
        <div className={styles.image || ''}>{imageElement}</div>
      )}
      <div className={`${styles?.cardContent || ''}`}>
        {hasVariableComponent && (
          <VariableComponent
            item={item}
            showDate={showDate}
            showAuthorOnOneLine={showAuthorOnOneLine}
            showAuthorAsLink={showAuthorAsLink}
            readingTime={readingTime ? reading_time : false}
            verifyIcon={verifyIcon}
          />
        )}
      </div>
    </div>
  );
};

ArticleCard.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,
    reading_time: PropTypes.string,
    relation: PropTypes.shape({
      logo: PropTypes.shape({
        alt: PropTypes.string,
        color: PropTypes.string,
        filename: PropTypes.string,
      }),
    }),
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  hasVariableComponent: PropTypes.bool,
  showAuthorOnOneLine: PropTypes.bool,
  showDate: PropTypes.bool,
  showAuthorAsLink: PropTypes.bool,
  readingTime: PropTypes.bool,
  verifyIcon: PropTypes.string,
  showImageAsLink: PropTypes.bool,
  moduleStyle: PropTypes.string,
};

export default ArticleCard;
