/* eslint-disable react/no-danger */
import React, { useState, useRef, lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import styles from './template-two.module.scss';
import { getAltText } from '~helpers/image';
import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
import LazyImage from '~hooks/lazy-image';
import StarRating from '~molecules/star-rating/one-star';
import OperatorBanner from '~atoms/header-operator-bannner';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api';

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



const TemplateTwo = ({
  relation,
  name,
  image,
  sections = {},
  pageTemplate,
  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
  description,
  numOfStars,
  showRoundedRating = false,
  width = 288,
  height = 288,
  moduleName = TrackingKeys?.HEADERPAYMENT,
}) => {
  const [isReadMore, setIsReadMore] = useState(true);
  const descriptionRef = useRef(null);

  const headerBonus = sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');

  const toggleReadMore = () => {
    descriptionRef.current.classList.add(styles.open);
    setIsReadMore(false);
  };

  return (
    <div className={styles.background}>
      <div className={styles.container}>
        <div className={styles.topSection}>
          <LazyImage
            loading="eager"
            src={imagePrettyUrl(image?.filename, width, height)}
            width={width}
            height={height}
            alt={getAltText(image, relation?.name)}
          />
          <div className={styles.topheader}>
            <div className={styles.name}>
              <h1>{name}</h1>
              {icon}
            </div>
            {!['coming_soon', 'inactive'].includes(relation?.status) ? (
              <StarRating
                numOfStars={numOfStars}
                rating={relation?.rating}
                icon={<FaStar title="Star Icon" />}
                showRoundedRating={showRoundedRating}
              />
            ) : (
              <div className={styles.ratingInactive}>
                <FaStar title="Star Icon" />
                {useTranslate('tba', 'TBA')}
              </div>
            )}
          </div>
          {description && (
            <div
              ref={descriptionRef}
              className={`${styles.desc} ${
                description.split(' ').length > 60 && styles.showReadMore
              }`}
              role="button"
              onClick={toggleReadMore}
              onKeyDown={toggleReadMore}
              aria-label={useTranslate('ariaLabel-continueReading', 'continue reading')}
              tabIndex={0}
              dangerouslySetInnerHTML={{
                __html:
                  description.split(' ').length > 60 && isReadMore
                    ? `${textWordsLimit(description, 60)} <span class='${
                        styles.contReadText
                      }'>${useTranslate('cont_read', 'Continue reading')}</span>`
                    : description,
              }}
            />
          )}
        </div>
        {headerBonus && (
          <OperatorBanner
            logo={headerBonus?.value?.logo}
            operator={headerBonus?.value}
            template={pageTemplate}
            moduleName={moduleName}
            clickedElement="header_operator_banner"
          />
        )}
      </div>
    </div>
  );
};

TemplateTwo.propTypes = {
  relation: PropTypes.shape({
    type: PropTypes.string,
    template: PropTypes.string,
    name: PropTypes.string,
    rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    status: PropTypes.string,
  }),
  name: PropTypes.string,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  sections: PropTypes.shape({}),
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  description: PropTypes.string,
  icon: PropTypes.element,
  showRoundedRating: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  moduleName: PropTypes.string,
};
export default TemplateTwo;
