/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import {
  imagePrettyUrl,
  getSectionExtraField,
  translate,
  getAltText,
} from 'gatsby-core-theme/src/helpers/getters';
import Button from 'gatsby-core-theme/src/components/atoms/button/button';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
import Link from 'gatsby-core-theme/src/hooks/link';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import styles from './template-two.module.scss';

const TemplateTwo = ({
  item,
  page,
  button_text = 'play_now_slots',
  width = 300,
  height = 250,
  useOneStarRating = true,
  affilateLink = false,
  useThumbnail = true,
  storybookImage,
}) => {
  const { relation, path, banner } = item;
  const { name } = relation || {};
  const { translations } = useContext(Context) || {};
  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={`${name || item?.title} 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?.cardInnerTop || ''}>
          <Link to={path} className="game-card-gtm">
            <span className={styles?.cardTitle || ''}>{name || item?.title}</span>
          </Link>
          <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,
                  ]
                }
              />
            )}
          </div>
        </div>
        <div className={styles?.cardInnerBottom || ''}>
          {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
                  module="cards_v2"
                  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}
                />
              ) : null}
            </>
          ) : (
            <Button
              to={path}
              buttonType={!featured ? 'primary' : 'secondary'}
              gtmClass="game-card-gtm btn-cta"
              btnText={translate(translations, button_text, 'Play now')}
            />
          )}
        </div>
      </div>
    </div>
  );
};

TemplateTwo.propTypes = {
  item: PropTypes.shape({
    relation: PropTypes.shape({
      rating: PropTypes.string,
      first_rating: PropTypes.string,
      second_rating: PropTypes.string,
      third_rating: PropTypes.string,
      fourth_rating: PropTypes.string,
      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,
      }),
    }),
    title: PropTypes.string,
    path: PropTypes.string,
    banner: 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,
};

export default TemplateTwo;
