/* eslint-disable import/no-extraneous-dependencies */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { FaCheck } from '@react-icons/all-files/fa/FaCheck';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import Link from 'gatsby-core-theme/src/hooks/link';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
import OperatorDetails from '../../../../molecules/operator-details';
import styles from './template-one.module.scss';
import Bonus from '~molecules/bonus-box/template-one';
import { TrackingKeys } from '~constants/tracking-api';
import VariableComponent from '../variables';
import VerificationBadge from '../../../verification-badge/template-one';

const VerifyIcon = lazy(() => import('~images/icons/verify'));

const TemplateOne = ({
  showVerificationBadge = false,
  showRibbon = false,
  item,
  useOneStarRating = true,
  page,
  showPaymentMethods = true,
  showSellingPoints = true,
  showAuthor = true,
  hasVariableComponent = false,
  showRatingLabel = false,
  showRatingDecimal = false,
  authorTemplateTwo = true,
  sellingPointsIcon = <FaCheck title="Check Icon" />,
  showBonusForAll = false,
  verifyIcon = (
    <Suspense fallback={<></>}>
      <VerifyIcon />
    </Suspense>
  ),
  showOperatorCta = true,
  operatorLogoWidth = 88,
  operatorLogoHeight = 88,
  paymentLogoWidth = 54,
  paymentLogoHeight = 36,
  BonusTemplate = Bonus,
  TncTemplate = Tnc,
  modulePosition,
  itemPosition,
  ctaIcon = <FaArrowRight title="Right-pointing Arrow Icon" />,
  hideTnc = false,
  moduleStyle,
}) => {
  const ribbons = item?.relation?.ribbons || [];
  const { relation, path } = item;
  const { name, status, selling_points: sellingPoints } = relation || {};
  const paymentMethods = relation?.deposit_methods;
  const reviewPath = path || relation.path || item?.relation?.review_link;
  const isInactive = status === 'inactive';
  return (
    <div
      className={`${styles?.operatorCard || ''} ${
        ribbons?.length > 0 ? styles?.withRibbon || '' : ''
      } ${moduleStyle ? styles[moduleStyle] || '' : ''}`}
    >
      <OperatorDetails
        item={item?.relation}
        showReviewLink={false}
        costumeStyle={styles.operatorDetails}
        imageWidth={operatorLogoWidth}
        imageHeight={operatorLogoHeight}
        ribbons={ribbons}
        showRibbon={showRibbon}
        icon={verifyIcon}
        template={page?.template}
        showAuthor={showAuthor}
        authorTemplateTwo={authorTemplateTwo}
        useOneStarRating={useOneStarRating}
        showRatingLabel={showRatingLabel}
        showRatingDecimal={showRatingDecimal}
        moduleName={TrackingKeys?.CARDS}
        modulePosition={modulePosition}
        itemPosition={itemPosition}
      />

      <div className={styles?.cardContent || ''}>
        <div className={styles?.cardContentContainer || ''}>
          <ReviewLink
            className={`${styles?.reviewLink || ''} operator-card-gtm`}
            template={page?.template}
            operatorName={name}
            reviewPath={reviewPath}
          />
          {showSellingPoints && !!sellingPoints?.length && (
            <SellingPoints sellingPoints={sellingPoints} limit={3} icon={sellingPointsIcon} />
          )}
          <div className={styles.bonusAndVerification}>
            {showBonusForAll ? (
              <BonusTemplate
                moduleName={TrackingKeys?.CARDS}
                item={relation}
                tracker="main"
                pageTemplate={page?.template}
                modulePosition={modulePosition}
                itemPosition={itemPosition}
              />
            ) : (
              !isInactive && (
                <BonusTemplate
                  moduleName={TrackingKeys?.CARDS}
                  item={relation}
                  tracker="main"
                  pageTemplate={page?.template}
                  modulePosition={modulePosition}
                  itemPosition={itemPosition}
                />
              )
            )}
            {showVerificationBadge && relation?.status === 'active' && <VerificationBadge />}
          </div>
        </div>
        <div className={styles?.cardFooter || ''}>
          {hasVariableComponent && (
            <VariableComponent
              item={item}
              page={page}
              featured={false}
              pageTemplate={page?.template}
              modulePosition={modulePosition}
              itemPosition={itemPosition}
            />
          )}
          {relation?.status !== 'not_recommended' && showOperatorCta && (
            <OperatorCta
              tracker="main"
              moduleName={TrackingKeys?.CARDS}
              operator={relation}
              buttonSize="m"
              translationsObj={{
                active: { translationKey: 'play_now', 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="operator-card-gtm btn-cta"
              pageTemplate={page?.template}
              icon={ctaIcon}
              modulePosition={modulePosition}
              itemPosition={itemPosition}
            />
          )}
          {showPaymentMethods && !!paymentMethods?.length && (
            <ul
              className={`${
                paymentMethods?.length > 4
                  ? `${styles.paymentMethods || ''} ${styles?.showMore || ''}`
                  : styles?.paymentMethods || ''
              }`}
            >
              {paymentMethods?.slice(0, 4).map((deposit) => {
                const logo = deposit?.logo?.filename || deposit?.logo;
                if (!logo) return;
                return (
                  <li key={`${deposit.id}-${deposit.name}`}>
                    <Link to={deposit?.path}>
                      <LazyImage
                        key={`${deposit.id}-${deposit.name}`}
                        src={imagePrettyUrl(logo, paymentLogoWidth, paymentLogoHeight)}
                        width={paymentLogoWidth}
                        height={paymentLogoHeight}
                        alt={deposit.name}
                      />
                    </Link>
                  </li>
                );
              })}
              {paymentMethods?.length > 4 && <li>{`+${paymentMethods?.length - 4}`}</li>}
            </ul>
          )}
          {!hideTnc && <TncTemplate operator={item?.relation} isFixed />}
        </div>
      </div>
    </div>
  );
};

TemplateOne.propTypes = {
  showVerificationBadge: PropTypes.bool,
  item: PropTypes.shape({
    relation: PropTypes.shape({
      ribbons: PropTypes.arrayOf(PropTypes.string),
      deposit_methods: PropTypes.arrayOf(PropTypes.shape({})),
      rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      name: PropTypes.string,
      path: PropTypes.string,
      status: PropTypes.string,
      logo: PropTypes.shape({
        filename: PropTypes.string,
      }),
      review_link: PropTypes.string,
      selling_points: PropTypes.arrayOf(PropTypes.string),
    }),
    path: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
      image: PropTypes.string,
    }),
  }).isRequired,
  page: PropTypes.shape({
    template: PropTypes.string,
  }),
  authorTemplateTwo: PropTypes.bool,
  showPaymentMethods: PropTypes.bool,
  showSellingPoints: PropTypes.bool,
  showAuthor: PropTypes.bool,
  hasVariableComponent: PropTypes.bool,
  sellingPointsIcon: PropTypes.element,
  verifyIcon: PropTypes.element,
  ctaIcon: PropTypes.element,
  hideTnc: PropTypes.bool,
  showRibbon: PropTypes.bool,
  useOneStarRating: PropTypes.bool,
  showRatingLabel: PropTypes.bool,
  showBonusForAll: PropTypes.bool,
  showRatingDecimal: PropTypes.bool,
  BonusTemplate: PropTypes.string,
  TncTemplate: PropTypes.string,
  showOperatorCta: PropTypes.bool,
  operatorLogoWidth: PropTypes.number,
  operatorLogoHeight: PropTypes.number,
  paymentLogoWidth: PropTypes.number,
  paymentLogoHeight: PropTypes.number,
  modulePosition: PropTypes.number,
  itemPosition: PropTypes.number,
  moduleStyle: PropTypes.string,
};

export default TemplateOne;
