/* eslint-disable camelcase */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import Button from 'gatsby-core-theme/src/components/atoms/button/button';
import Link from 'gatsby-core-theme/src/hooks/link';
import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import {
  getAltText,
  imagePrettyUrl,
  textWordsLimit,
  translate,
} from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import SellingPoints from '../sellingPoints';
import styles from './template-one.module.scss';

const TemplateOneTwo = ({
  item,
  showSellingPoints = true,
  width = 150,
  height = 150,
  wordLimit = 50,
}) => {
  const { translations } = useContext(Context);
  const { title, path, relation, sections, description } = item || {};
  const { name, selling_points } = item?.relation || {};

  const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;

  return (
    <>
      <div className={styles?.content || ''}>
        <div className={styles?.header || ''}>
          <Link
            className={`${styles?.image || ''} payment-method-card-gtm`}
            aria-label={`${title} Link`}
            to={path}
          >
            <LazyImage
              width={width}
              className={styles?.logo || ''}
              height={height}
              src={imagePrettyUrl(imageObject?.filename, width, height)}
              alt={getAltText(imageObject, title)}
            />
          </Link>

          <div className={`${styles?.links || ''}`}>
            <span className={styles?.title || ''}>{name}</span>
            <StarRating
              numOfStars={5}
              halfStars={false}
              rating={relation?.rating}
              showDot={false}
            />
          </div>
        </div>

        {showSellingPoints && <SellingPoints sellingPoints={selling_points} />}
        <div className={styles?.excerpt || ''}>
          {!showSellingPoints &&
            textWordsLimit(
              description ||
                sections?.header?.extra_fields?.header_text?.value ||
                sections?.header?.extra_fields?.header_text,
              wordLimit
            )}
        </div>
        <Button
          to={path}
          buttonType="primary"
          gtmClass="game-card-gtm btn-cta"
          btnText={
            !showSellingPoints
              ? `${translate(translations, 'go_to_review', 'Go To Review')}`
              : `${translate(translations, 'read_review', 'Read Review')}`
          }
          icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
        />
      </div>
    </>
  );
};
TemplateOneTwo.propTypes = {
  showSellingPoints: PropTypes.bool,
  module: PropTypes.shape({
    style: PropTypes.string,
  }),
  item: PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
    path: PropTypes.string,
    relation: PropTypes.shape({
      selling_points: PropTypes.arrayOf(PropTypes.string).isRequired,
      name: PropTypes.string,
      games_count: PropTypes.number,
      logo: PropTypes.string,
      logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
      standardised_logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
      rating: PropTypes.string,
    }),
    sections: PropTypes.shape({
      header: PropTypes.shape({
        extra_fields: PropTypes.shape({
          header_text: PropTypes.string,
        }),
      }),
    }),
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  wordLimit: PropTypes.number,
};

export default TemplateOneTwo;
