/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import { BiLike } from '@react-icons/all-files/bi/BiLike';
import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import OperatorDetails from '../../../../molecules/operator-details';
import VariableComponent from '../variables';
import styles from './template-three.module.scss';

const TemplateThree = ({
  showRibbon = false,
  item,
  useOneStarRating = true,
  page,
  showAuthor = true,
  verifyIcon = '../../../images/verify.svg',
  showRatingLabel = false,
  showRatingDecimal = false,
  authorTemplateTwo = true,
  hasVariableComponent = false,
  showBonusForAll = false,
  showOperatorCta = true,
  BonusTemplate = BonusTemplateDefault,
}) => {
  const { ribbons } = item?.relation;
  const { relation, path } = item;
  const { name, status } = relation;
  const reviewPath = path || relation.path;
  const isInactive = status === 'inactive';

  return (
    <div
      className={`${styles?.operatorCard || ''} ${
        ribbons?.length > 0 ? styles?.withRibbon || '' : ''
      }`}
    >
      <OperatorDetails
        item={item}
        showReviewLink={false}
        costumeStyle={styles.operatorDetails}
        imageWidth={88}
        imageHeight={88}
        ribbons={ribbons}
        showRibbon={showRibbon}
        icon={verifyIcon}
        template={page?.template}
        showAuthor={showAuthor}
        authorTemplateTwo={authorTemplateTwo}
        useOneStarRating={useOneStarRating}
        showRatingLabel={showRatingLabel}
        showRatingDecimal={showRatingDecimal}
        module="cards"
      />
      <div className={styles?.cardContent || ''}>
        <div className={styles?.cardContentContainer || ''}>
          {showBonusForAll ? (
            <BonusTemplate module="cards" item={relation} tracker="main" />
          ) : (
            !isInactive && <BonusTemplate module="cards" item={relation} tracker="main" />
          )}
          <div className={styles?.cardFooter || ''}>
            {relation?.status !== 'not_recommended' && showOperatorCta && (
              <OperatorCta
                tracker="main"
                buttonSize="m"
                module="cards_v2"
                operator={relation}
                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={<FaArrowRight title="Right-pointing Arrow Icon" />}
              />
            )}
            {hasVariableComponent && <VariableComponent item={item} page={page} featured={false} />}
          </div>
        </div>
        <div className={styles?.feedback || ''}>
          {(item?.true_votes !== null || item?.false_votes !== null) && (
            <div className={styles?.feedbackCounter || ''}>
              <div className={styles?.likes || ''}>
                <BiLike color="#3E3C47" title="Like Icon" />
                {item?.true_votes}
              </div>
              <div className={styles?.dislikes || ''}>
                <BiDislike color="#3E3C47" title="Dislike Icon" />
                {item?.false_votes}
              </div>
            </div>
          )}
          <ReviewLink
            className={`${styles?.reviewLink || ''} operator-card-gtm`}
            template={page?.template}
            operatorName={name}
            reviewPath={reviewPath}
          />
        </div>
      </div>
    </div>
  );
};

TemplateThree.propTypes = {
  item: PropTypes.shape({
    relation: PropTypes.shape({
      rating: PropTypes.string,
      name: PropTypes.string,
      path: PropTypes.string,
      status: PropTypes.string,
      standardised_logo_url_object: PropTypes.shape({
        filename: PropTypes.string,
      }),
    }),
    path: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
      image: PropTypes.string,
    }),
    true_votes: PropTypes.number,
    false_votes: PropTypes.number,
  }).isRequired,
  page: PropTypes.shape({
    template: PropTypes.string,
  }),
  authorTemplateTwo: PropTypes.bool,
  showAuthor: PropTypes.bool,
  verifyIcon: PropTypes.string,
  showRibbon: PropTypes.bool,
  hasVariableComponent: PropTypes.bool,
  useOneStarRating: PropTypes.bool,
  showRatingLabel: PropTypes.bool,
  showRatingDecimal: PropTypes.bool,
  showBonusForAll: PropTypes.bool,
  BonusTemplate: PropTypes.string,
  showOperatorCta: PropTypes.bool,
};

export default TemplateThree;
