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

const PopupCard = ({
  item,
  tracker,
  showName = false,
  showTnc = false,
  showRating = false,
  showReviewLink = false,
  hasCollapse = true,
  buttonSize = '',
  buttonType = 'primary',
  template,
}) => {
  const operatorName = item.name;
  const oneLiner = item?.one_liners?.main?.one_liner;
  const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
  const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;

  return (
    <div className={styles?.popupCard || ''}>
      <div className={styles?.imgContainer || ''}>
        <LazyImage
          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 98, 98)}
          alt={getAltText(imageObject, oneLiner)}
          width={98}
          height={98}
        />
        {showRating && <StarRating numOfStars={5} rating={item?.rating} />}
        {showName && <p className={styles?.name || ''}>{operatorName}</p>}
      </div>
      <Bonus module="popup" item={item} tracker={tracker} />
      <div className={styles?.buttonContainer || ''}>
        <OperatorCta
          tracker={tracker}
          module="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}
        />
        {showReviewLink && (
          <ReviewLink
            className={`${styles.reviewLink} popup-review-gtm`}
            template={template}
            operatorName={item.name}
            reviewPath={item.review_link}
          />
        )}
      </div>
      {showTnc && tnc === '1' && (
        <div className={styles?.tandc || ''}>
          <Tnc onlyMobile operator={item} hasCollapse={hasCollapse} />
        </div>
      )}
    </div>
  );
};

PopupCard.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string,
    bonus: PropTypes.shape({
      operator_name: PropTypes.string,
    }),
    links: PropTypes.shape({
      main: PropTypes.string,
    }),
    standardised_logo_url_object: PropTypes.shape({
      alt: PropTypes.string,
    }),
    review_link: PropTypes.string,
    rating: PropTypes.string,
    logo_url_object: PropTypes.shape({
      alt: PropTypes.string,
    }),
    extra_fields: PropTypes.shape({
      terms_and_conditions_text_enabled: PropTypes.string,
    }),
    logo_url: PropTypes.string,
    one_liners: PropTypes.shape({
      main: PropTypes.shape({
        one_liner: PropTypes.string,
      }),
      secondary: PropTypes.shape({
        one_liner: PropTypes.string,
      }),
    }),
  }),
  tracker: PropTypes.string,
  showName: PropTypes.bool,
  showTnc: PropTypes.bool,
  showRating: PropTypes.bool,
  showReviewLink: PropTypes.bool,
  template: PropTypes.string,
  hasCollapse: PropTypes.bool,
  buttonSize: PropTypes.string,
  buttonType: PropTypes.string,
};

export default PopupCard;
