/* eslint-disable camelcase */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import Link from '~hooks/link';
import Button from '~atoms/button/button';
import StarRating from '~molecules/star-rating';
import OneStarRating from '~molecules/star-rating/one-star';
import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import SellingPoints from '../sellingPoints';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './template-three.module.scss';

const TemplateThree = ({
  item,
  width = 150,
  height = 150,
  useOneStarRating = false,
  showRoundedRating = false,
}) => {
  const { title, path, relation } = item || {};
  const { name, selling_points } = item?.relation || {};

  const imageObject = relation?.logo;
  const StarRatingComponent = useOneStarRating ? OneStarRating : StarRating;

  return (
    <>
      <div className={styles?.content || ''}>
        <div className={styles?.header || ''}>
          <Link
            className={`${styles?.image || ''} payment-method-card-gtm`}
            aria-label={useTranslate(`ariaLabel-${title}Link`, `${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>
            <StarRatingComponent
              numOfStars={5}
              halfStars={false}
              rating={relation?.rating}
              showDot={false}
              showRoundedRating={showRoundedRating}
            />
          </div>
        </div>

        <div className={styles?.excerpt || ''}>
          <SellingPoints sellingPoints={selling_points} />
        </div>
        <Button
          to={path}
          buttonType="primary"
          gtmClass="game-card-gtm btn-cta"
          btnText="Read Review"
          icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
        />
      </div>
    </>
  );
};
TemplateThree.propTypes = {
  module: PropTypes.shape({
    style: PropTypes.string,
  }),
  useOneStarRating: PropTypes.bool,
  item: PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
    path: PropTypes.string,
    relation: PropTypes.shape({
      selling_points: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
      name: PropTypes.string,
      games_count: PropTypes.number,
      logo: PropTypes.shape({}),
      logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
      standardised_logo_filename_object: PropTypes.shape({
        alt: PropTypes.string,
      }),
      rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
    sections: PropTypes.shape({
      header: PropTypes.shape({
        extra_fields: PropTypes.shape({
          header_text: PropTypes.string,
        }),
      }),
    }),
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  showRoundedRating: PropTypes.bool,
};

export default TemplateThree;
