/* eslint-disable import/no-extraneous-dependencies */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import Link from 'gatsby-core-theme/src/hooks/link';
import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
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 VariableComponent from '../variables';
import OperatorDetails from '../../../../molecules/operator-details';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './template-two.module.scss';

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

const TemplateTwo = ({
  showRibbon = false,
  item,
  useOneStarRating = true,
  page,
  showPaymentMethods = true,
  showAuthor = true,
  showRatingLabel = false,
  showRatingDecimal = false,
  authorTemplateTwo = true,
  contentRibbon = false,
  hasVariableComponent = false,
  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
  showBonusForAll = false,
  operatorLogoWidth = 88,
  operatorLogoHeight = 88,
  width = 54,
  height = 36,
  BonusTemplate = BonusTemplateDefault,
  modulePosition,
  itemPosition,
}) => {
  const ribbons = item?.relation?.ribbons || [];
  const { relation, path } = item;
  const { name, status } = relation || {};
  const paymentMethods = relation?.deposit_methods;
  const reviewPath = path || relation.path;
  const isInactive = status === 'inactive';

  return (
    <div
      className={`${styles?.operatorCard || ''} ${
        ribbons?.length > 0 ? styles?.withRibbon || '' : ''
      }`}
    >
      <OperatorDetails
        item={item?.relation}
        showReviewLink={false}
        costumeStyle={styles.operatorDetails}
        imageWidth={operatorLogoWidth}
        imageHeight={operatorLogoHeight}
        ribbons={ribbons}
        showRibbon={showRibbon}
        contentRibbon={contentRibbon}
        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 || ''}>
        {showBonusForAll ? (
          <BonusTemplate
          moduleName={TrackingKeys?.CARDS}
            welcomeBonus={false}
            ctaBtn
            item={relation}
            tracker="main"
            pageTemplate={page?.template}
            modulePosition={modulePosition}
            itemPosition={itemPosition}
          />
        ) : (
          !isInactive && (
            <BonusTemplate
            moduleName={TrackingKeys?.CARDS}
              welcomeBonus={false}
              ctaBtn
              item={relation}
              tracker="main"
              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;
              if (!logo) return;
              return (
                <li>
                  <Link to={deposit?.path}>
                    <LazyImage
                      key={`${deposit.id}-${deposit.name}`}
                      src={imagePrettyUrl(logo, width, height)}
                      width={width}
                      height={height}
                      alt={deposit.name}
                    />
                  </Link>
                </li>
              );
            })}
            {paymentMethods?.length > 4 && <li>{`+${paymentMethods?.length - 4}`}</li>}
          </ul>
        )}
        <ReviewLink
          className={`${styles.reviewLink} operator-card-gtm`}
          template={page?.template}
          operatorName={name}
          reviewPath={reviewPath}
        />
      </div>
      <Tnc operator={item?.relation} isFixed />

      {hasVariableComponent && (
        <VariableComponent item={item} page={page} featured={false} template="templateTwo" />
      )}
    </div>
  );
};

TemplateTwo.propTypes = {
  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,
      }),
    }),
    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,
  showAuthor: PropTypes.bool,
  verifyIcon: PropTypes.element,
  showRibbon: PropTypes.bool,
  useOneStarRating: PropTypes.bool,
  showRatingLabel: PropTypes.bool,
  showRatingDecimal: PropTypes.bool,
  hasVariableComponent: PropTypes.bool,
  contentRibbon: PropTypes.bool,
  showBonusForAll: PropTypes.bool,
  BonusTemplate: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
  operatorLogoWidth: PropTypes.number,
  operatorLogoHeight: PropTypes.number,
  modulePosition: PropTypes.number,
  itemPosition: PropTypes.number,
};

export default TemplateTwo;
