/* 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 Button from '~atoms/button/button';
import Link from '~hooks/link';
import StarRating from '~molecules/star-rating/one-star';
import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import useTranslate from '~hooks/useTranslate/useTranslate';
import SellingPoints from '../sellingPoints';
import styles from './template-one.module.scss';

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

  const imageObject = relation?.logo;

  return (
    <>
      <div className={`${styles?.content || ''} ${moduleStyle ? styles[moduleStyle] || '' : ''}`}>
        <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>
            <StarRating
              numOfStars={5}
              halfStars={false}
              rating={relation?.rating}
              showDot={false}
              showRoundedRating={showRoundedRating}
            />
          </div>
        </div>

        {showSellingPoints && <SellingPoints sellingPoints={selling_points} />}
        <div className={styles?.excerpt || ''}>
          {!showSellingPoints && showDescription &&
            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
              ? `${useTranslate('go_to_review', 'Go To Review')}`
              : `${useTranslate('read_review', 'Read Review')}`
          }
          icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
        />
      </div>
    </>
  );
};
TemplateOneTwo.propTypes = {
  showSellingPoints: PropTypes.bool,
  moduleStyle: PropTypes.string,
  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,
  wordLimit: PropTypes.number,
  showRoundedRating: PropTypes.bool,
  showDescription: PropTypes.bool,
};

export default TemplateOneTwo;
