/* 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/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-one.module.scss';

const TemplateOne = ({
  item,
  page,
  button_text = 'play_now_slots',
  width = 300,
  height = 250,
  affilateLink = false,
  storybookImage,
  showRoundedRating = false,
  modulePosition,
  itemPosition,
  moduleStyle,
}) => {
  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 = relation?.logo?.filename || banner;

  return (
    <div className={`${styles?.baseCard || ''} ${featured ? styles.featured || '' : ''} ${moduleStyle ? styles[moduleStyle] || '' : ''}`}>
      <Link
        to={path}
        className={`game-card-gtm ${styles?.cardBanner || ''}`}
        aria-label={useTranslate(
          `ariaLabel-${name || item?.title}Link`,
          `${name || item?.title} Link`
        )}
      >
        {storybookImage || gameImage ? (
          <LazyImage
            width={width}
            height={height}
            src={storybookImage || imagePrettyUrl(gameImage, width, height)}
            alt={getAltText(relation?.logo, name || item?.title)}
          />
        ) : (
          <GatsbyImg filename="default-slot.jpg" alt={name || item?.title} />
        )}
      </Link>
      <div className={`${styles?.cardContent || ''} ${featured ? styles?.featured || '' : ''}`}>
        <Link to={path} className="game-card-gtm">
          <span className={styles?.cardTitle || ''}>{name || item?.title}</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>
          )}
          <div className={styles?.cardRating || ''}>
            {relation && (
              <StarRating
                numOfStars={5}
                halfStars={false}
                rating={
                  relation.rating || [
                    relation.first_rating,
                    relation.second_rating,
                    relation.third_rating,
                    relation.fourth_rating,
                  ]
                }
                showRoundedRating={showRoundedRating}
              />
            )}
          </div>
        </div>
        {affilateLink ? (
          <>
            {operator && operator.status !== 'not_recommended' ? (
              <OperatorCta
                tracker="main"
                moduleName={TrackingKeys?.CARDS}
                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>
  );
};

TemplateOne.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,
      name: PropTypes.string,
      fourth_rating: PropTypes.number,
      game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
      logo: 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,
  affilateLink: PropTypes.bool,
  storybookImage: PropTypes.string,
  showRoundedRating: PropTypes.bool,
  modulePosition: PropTypes.number,
  itemPosition: PropTypes.number,
  moduleStyle: PropTypes.string,
};

export default TemplateOne;
