import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import { imagePrettyUrl, getObjectValue } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import LazyImage from '~hooks/lazy-image';
import OneStar from '~molecules/star-rating/one-star';
import StarRating from '~molecules/star-rating';
import OperatorBanner from '~atoms/header-operator-bannner';
import { operatorRatings } from '~constants/ratings-constant';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api'
import PrettyLink from '~atoms/pretty-link';

import styles from './template-five.module.scss';

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

const TemplateFive = ({
  relation,
  image,
  name,
  pageTemplate,
  featureImg,
  extraFields,
  type,
  numOfStars = 5,
  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
  showRoundedRating = false,
  operatorLogoWidth = 208,
  operatorLogoHeight = 208,
  featureImgWidth = 413,
  featureImgHeight = 413,
  moduleName = TrackingKeys?.HEADEROPERATOR
}) => {
  const logo = () => (
    <PrettyLink
      operator={relation}
      pageTemplate={pageTemplate}
      moduleName={moduleName}
      tracker="main"
      clickedElement="operator_logo"
      className="header-gtm logo-cta "
    >
      <LazyImage
        loading="eager"
        src={imagePrettyUrl(image?.filename, operatorLogoWidth, operatorLogoHeight)}
        width={operatorLogoWidth}
        height={operatorLogoHeight}
        alt={getAltText(image, relation?.name)}
      />
    </PrettyLink>
  );

  const header = () => (
    <div className={`${styles.header}`}>
      <div className={`${styles.name} `}>
        <h1>{name}</h1>
        {icon}
      </div>
      {!['coming_soon', 'inactive'].includes(relation?.status) ? (
        <OneStar
          numOfStars={numOfStars}
          rating={numOfStars < 6 ? relation?.rating : Math.round(relation?.rating * 2)}
          icon={<FaStar title="Star Icon" />}
          showDot={false}
        />
      ) : (
        <div className={styles.ratingInactive}>
          <FaStar title="Star Icon" />
          {useTranslate('tba', 'TBA')}
        </div>
      )}
    </div>
  );

  return (
    <div className={styles.background}>
      <div className={styles.container}>
        <div className={styles.topSection}>{logo()}</div>
        {header()}
        <div className={styles.main}>
          {extraFields?.summary && (
            <div
              className={styles.decs}
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: extraFields?.summary }}
            />
          )}
          <div className={styles.ratings}>
            {operatorRatings[type]?.slice(0, 3)?.map((elm) => {
              const value = getObjectValue(relation, elm?.fieldValue);
              return (
                <div key={elm?.translationKey} className>
                  <span className={styles.ratingLabel}>
                    {useTranslate(elm?.translationKey, elm?.fieldLabel)}
                  </span>
                  <span className={styles.ratingValue}>
                    {value ? (
                      <>
                        {numOfStars < 6 ? value : Math.round(value * 2)}
                        <span> /{numOfStars}</span>
                      </>
                    ) : (
                      '-'
                    )}
                  </span>
                  <StarRating numOfStars={5} rating={value} showRoundedRating={showRoundedRating} />
                </div>
              );
            })}
          </div>
        </div>

        <div className={styles.featureImage}>
          {featureImg?.filename && (
            <LazyImage
              src={imagePrettyUrl(featureImg?.filename, featureImgWidth, featureImgHeight)}
              loading="eager"
              width={featureImgWidth}
              height={featureImgHeight}
              alt={getAltText(featureImg)}
            />
          )}
        </div>

        <div className={styles.operatorBanner}>
          <OperatorBanner operator={relation} template={pageTemplate} moduleName={moduleName} clickedElement="header_operator_banner" />
        </div>
      </div>
    </div>
  );
};

TemplateFive.propTypes = {
  relation: PropTypes.shape({
    type: PropTypes.string,
    template: PropTypes.string,
    name: PropTypes.string,
    rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    rating_games: PropTypes.string,
    rating_bonuses: PropTypes.string,
    rating_payout: PropTypes.string,
    status: PropTypes.string,
  }),
  name: PropTypes.string,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  featureImg: PropTypes.shape({
    filename: PropTypes.string,
  }),
  type: PropTypes.string,
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  extraFields: PropTypes.shape({
    summary: PropTypes.node,
  }),
  icon: PropTypes.element,
  showRoundedRating: PropTypes.bool,
  operatorLogoWidth: PropTypes.number,
  operatorLogoHeight: PropTypes.number,
  featureImgWidth: PropTypes.number,
  featureImgHeight: PropTypes.number,
  moduleName: PropTypes.string,
};

export default TemplateFive;
