/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import Button from '~atoms/button/button';
import StarRating from '~molecules/star-rating';
import OneStarRating from '~molecules/star-rating/one-star';
import OperatorCta from '~atoms/button/operator-cta';
import GatsbyImg from '~hooks/gatsby-img';
import Link from '~hooks/link';
import LazyImage from '~hooks/lazy-image';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api';
import styles from './template-three.module.scss';

const TemplateThree = ({
  item,
  page,
  button_text = 'play_now_slots',
  width = 300,
  height = 250,
  useOneStarRating = true,
  affilateLink = false,
  useThumbnail = true,
  storybookImage,
  showRoundedRating = false,
  modulePosition,
  itemPosition,
}) => {
  const { relation, path, banner } = item;
  const { name } = relation || {};

  const featured = !!getSectionExtraField(null, item, 'card_background_image');
  const operator = item.extra_fields?.operator;
  const provider = relation?.game_provider;
  const gameImage =
    (useThumbnail && relation?.thumbnail_filename_object?.filename) ||
    relation?.standardised_logo_filename_object?.filename ||
    banner;
  const StarRatingComponent = useOneStarRating ? OneStarRating : StarRating;

  return (
    <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
      <Link
        to={path}
        className={`game-card-gtm ${styles?.cardBanner || ''}`}
        aria-label={useTranslate(`ariaLabel-${name}Link`, `${name} Link`)}
      >
        {storybookImage || gameImage ? (
          <LazyImage
            width={width}
            height={height}
            src={storybookImage || imagePrettyUrl(gameImage, width, height)}
            alt={getAltText(relation?.standardised_logo_filename_object, name || item?.title)}
          />
        ) : (
          <GatsbyImg filename="default-slot.jpg" alt={name || item?.title} />
        )}
      </Link>
      <div className={`${styles?.cardContent || ''} ${featured ? styles.featured || '' : ''}`}>
        <div className={styles?.cardRating || ''}>
          {relation && (
            <StarRatingComponent
              numOfStars={5}
              halfStars={false}
              rating={
                relation.rating || [
                  relation.first_rating,
                  relation.second_rating,
                  relation.third_rating,
                  relation.fourth_rating,
                ]
              }
              showRoundedRating={showRoundedRating}
            />
          )}
        </div>
        <Link to={path} className="game-card-gtm">
          <span className={styles?.cardTitle || ''}>{name}</span>
        </Link>
        <div className={styles?.cardInner || ''}>
          {operator && operator.path ? (
            <Link to={operator.path} className={styles?.cardProvider || ''}>
              {operator.name}
            </Link>
          ) : (
            <Link to={provider?.path} className={styles?.cardProvider || ''}>
              <div className={styles?.cardProvider || ''}>{provider?.name}</div>
            </Link>
          )}
          {affilateLink ? (
            <>
              {operator && operator.status !== 'not_recommended' ? (
                <OperatorCta
                  moduleName={TrackingKeys?.CARDS}
                  tracker="main"
                  operator={operator}
                  translationsObj={{
                    active: { translationKey: 'play_now_game', defaultValue: 'Play for Real' },
                    not_recommended: {
                      translationKey: 'not_recommended',
                      defaultValue: 'Not Recommended',
                    },
                    coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
                    inactive: {
                      translationKey: 'inactive',
                      defaultValue: 'Not Accepting New Players',
                    },
                    blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
                  }}
                  gtmClass="operator-card-gtm btn-cta"
                  pageTemplate={page?.template}
                  modulePosition={modulePosition}
                  itemPosition={itemPosition}
                />
              ) : null}
            </>
          ) : (
            <Button
              to={path}
              buttonType={!featured ? 'primary' : 'secondary'}
              gtmClass="game-card-gtm btn-cta"
              btnText={useTranslate(button_text, 'Play now')}
            />
          )}
        </div>
      </div>
    </div>
  );
};

TemplateThree.propTypes = {
  item: PropTypes.shape({
    relation: PropTypes.shape({
      rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      first_rating: PropTypes.number,
      second_rating: PropTypes.number,
      third_rating: PropTypes.number,
      fourth_rating: PropTypes.number,
      name: PropTypes.string,
      game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
      thumbnail_filename_object: PropTypes.shape({
        filename: PropTypes.string,
        alt: PropTypes.string,
      }),
      standardised_logo_filename_object: PropTypes.shape({
        filename: PropTypes.string,
        alt: PropTypes.string,
      }),
    }),
    path: PropTypes.string,
    banner: PropTypes.string,
    title: PropTypes.string,
    extra_fields: PropTypes.shape({
      operator: PropTypes.shape({
        status: PropTypes.string,
        name: PropTypes.string,
        path: PropTypes.string,
      }),
    }),
  }).isRequired,
  page: PropTypes.shape({
    template: PropTypes.string,
  }),
  button_text: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
  useOneStarRating: PropTypes.bool,
  useThumbnail: PropTypes.bool,
  affilateLink: PropTypes.bool,
  storybookImage: PropTypes.string,
  showRoundedRating: PropTypes.bool,
  modulePosition: PropTypes.number,
  itemPosition: PropTypes.number,
};

export default TemplateThree;
