/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-core-theme/src/hooks/link';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
import { imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
import { getAltText } from 'gatsby-core-theme/src/helpers/image';
import useTranslate from '~hooks/useTranslate/useTranslate';

import styles from './software-provider-card.module.scss';

const SoftwareProviderCard = ({
  item,
  showTitle = true,
  showProvider = true,
  showDesc = true,
  gameProvider = {
    textOne: 'This game provider has',
    textTwo: 'slots',
  },
  width = 150,
  height = 150,
}) => {
  const { title, path, relation, sections } = item;
  const logUrlObject = item.relation?.logo?.filename || item?.relation?.logo;

  return (
    <div className={styles?.content || ''}>
      <div className={styles?.header || ''}>
        <Link
          className={`${styles?.links || ''} software-provider-card-gtm`}
          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
          to={path}
        >
          {logUrlObject ? (
            <LazyImage
              width={width}
              height={height}
              className={styles?.logo || ''}
              src={imagePrettyUrl(logUrlObject, width, height)}
              alt={getAltText(logUrlObject, title)}
            />
          ) : (
            <GatsbyImg
              alt={title}
              width="100%"
              height="100%"
              loading="lazy"
              filename="default-article.jpg"
            />
          )}
        </Link>
        {showTitle && (
          <Link className={`${styles?.links || ''} software-provider-card-gtm`} to={path}>
            <span className={styles?.title || ''}>{title}</span>
          </Link>
        )}
      </div>
      {showDesc && (
        <div className={styles?.excerpt || ''}>
          {textWordsLimit(
            sections?.header?.extra_fields?.header_text?.value ||
              sections?.header?.extra_fields?.header_text
          )}
        </div>
      )}
      <div className={styles?.bottom || ''}>
        {relation?.games_count && showProvider && (
          <p>
            {gameProvider.textOne}
            <span className={styles['counter-number']}> {relation?.games_count} </span>{' '}
            {gameProvider.textTwo}
          </p>
        )}
      </div>
    </div>
  );
};
SoftwareProviderCard.propTypes = {
  showTitle: PropTypes.bool,
  showProvider: PropTypes.bool,
  showDesc: PropTypes.bool,
  gameProvider: PropTypes.shape({
    textOne: PropTypes.string,
    textTwo: PropTypes.string,
  }),
  item: PropTypes.shape({
    title: PropTypes.string,
    path: PropTypes.string,
    relation: PropTypes.shape({
      games_count: PropTypes.number,
      logo: PropTypes.string,
      logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
      standardised_logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
    }),
    sections: PropTypes.shape({
      header: PropTypes.shape({
        extra_fields: PropTypes.shape({
          header_text: PropTypes.string,
        }),
      }),
    }),
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
};

export default SoftwareProviderCard;
