/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import OperatorCta from '~atoms/button/operator-cta';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import ReviewLink from '~atoms/review-link';
import Tnc from '~molecules/tnc';
import StarRating from '~molecules/star-rating';
import Bonus from '~molecules/bonus-box/template-one';
import LazyImage from '~hooks/lazy-image';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './popup-card.module.scss';

const PopupCard = ({
  item,
  tracker,
  showName = false,
  showRating = false,
  showReviewLink = false,
  buttonSize = '',
  buttonType = 'primary',
  template,
  showRoundedRating = false,
  tncFixed = true,
  width = 98,
  height = 98,
  itemPosition,
}) => {
  const operatorName = item.name;
  const oneLiner = item?.bonuses?.main?.one_liner;
  const imageObject = item?.logo;

  return (
    <div className={styles?.popupCard || ''}>
      <div className={styles?.imgContainer || ''}>
        <LazyImage
          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, width, height)}
          alt={getAltText(imageObject, oneLiner)}
          width={height}
          height={width}
        />
        {showRating && (
          <StarRating numOfStars={5} rating={item?.rating} showRoundedRating={showRoundedRating} />
        )}
        {showName && <p className={styles?.name || ''}>{operatorName}</p>}
      </div>
      <Bonus moduleName={TrackingKeys?.POPUP} item={item} tracker={tracker} itemPosition={itemPosition} pageTemplate={template} />
      <div className={styles?.buttonContainer || ''}>
        <OperatorCta
          tracker={tracker}
          moduleName={TrackingKeys?.POPUP}
          operator={item}
          buttonSize={buttonSize}
          buttonType={buttonType}
          translationsObj={{
            active: { translationKey: 'play_now_popup', defaultValue: 'Play Now' },
            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="popup-operator-cta-gtm"
          pageTemplate={template}
          itemPosition={itemPosition}
        />
        {showReviewLink && (
          <ReviewLink
            className={`${styles.reviewLink} popup-review-gtm`}
            template={template}
            operatorName={item.name}
            reviewPath={item.review_link}
          />
        )}
      </div>
      <Tnc operator={item} isFixed={tncFixed} />
    </div>
  );
};

PopupCard.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string,
    bonuses: PropTypes.shape({
      main: PropTypes.shape({
        one_liner: PropTypes.string,
      }),
    }),
    bonus: PropTypes.shape({
      operator_name: PropTypes.string,
    }),
    links: PropTypes.shape({
      main: PropTypes.string,
    }),
    logo: PropTypes.shape({
      alt: PropTypes.string,
    }),
    review_link: PropTypes.string,
    rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    logo_url_object: PropTypes.shape({
      alt: PropTypes.string,
    }),
    logo_url: PropTypes.string,
  }),
  tracker: PropTypes.string,
  showName: PropTypes.bool,
  showRating: PropTypes.bool,
  showReviewLink: PropTypes.bool,
  template: PropTypes.string,
  buttonSize: PropTypes.string,
  tncFixed: PropTypes.bool,
  buttonType: PropTypes.string,
  showRoundedRating: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  itemPosition: PropTypes.number,
};

export default PopupCard;
