/* eslint-disable react/no-danger */
import React, { useState, useRef, useContext } from 'react';
import PropTypes from 'prop-types';
import {
  imagePrettyUrl,
  getAltText,
  translate,
  textWordsLimit,
} from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import Rating from '../../../../../atoms/ratings';
import OperatorBanner from '../../../../../atoms/header-operator-bannner';

import styles from './template-one-three.module.scss';

const TemplateOneThree = ({
  relation,
  type,
  name,
  image,
  sections = {},
  pageTemplate,
  icon,
  description,
  numOfStars,
  template = 'template_one',
  CostumeComponent = null,
}) => {
  const [isReadMore, setIsReadMore] = useState(true);
  const { translations } = useContext(Context) || {};
  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.parentContainer} ${
        template === 'template_three' && styles.templateThreeParentContainer
      }`}
    >
      <div
        className={`${styles.container} ${
          template === 'template_three' && styles.templateThreeContainer
        }`}
      >
        <div
          className={`${styles.topSection} ${
            template === 'template_three' && styles.templateThreeTopSection
          }`}
        >
          <LazyImage
            loading="eager"
            src={imagePrettyUrl(image?.filename, 179, 179)}
            width={179}
            height={179}
            alt={getAltText(image, relation?.name)}
          />
          <div
            className={`${styles.topContent} ${
              template === 'template_three' && styles.templateThreeTopContent
            }`}
          >
            <div className={styles.name}>
              <h1>{name}</h1>
              <LazyImage
                src={icon || '../../../../../../images/verify.svg'}
                loading="eager"
                alt="Verified"
                width={24}
                height={24}
              />
            </div>
            {relation?.rating ? (
              <StarRating
                numOfStars={numOfStars}
                rating={relation?.rating}
                icon={<FaStar title="Star Icon" />}
              />
            ) : (
              <div className={styles.ratingInactive}>
                <FaStar title="Star Icon" />
                <span>-</span>
              </div>
            )}
          </div>
        </div>

        {description && template !== 'template_three' && (
          <div
            ref={descriptionRef}
            className={`${styles.desc} ${
              description.split(' ').length > 60 && styles.showReadMore
            }`}
            role="button"
            onClick={toggleReadMore}
            onKeyDown={toggleReadMore}
            aria-label="continue reading"
            tabIndex={0}
            dangerouslySetInnerHTML={{
              __html:
                description.split(' ').length > 60 && isReadMore
                  ? `${textWordsLimit(description, 60)} <span class='${
                      styles.contReadText
                    }'>${translate(translations, 'cont_read', 'Continue reading')}</span>`
                  : description,
            }}
          />
        )}

        {CostumeComponent && <div className={styles.costumeComponent}>{CostumeComponent}</div>}

        <Rating item={relation} type={type} numOfStars={numOfStars} />
      </div>
      {headerBonus && (
        <div className={template !== 'template_three' ? styles.templateOneCta : styles.cta}>
          <OperatorBanner
            logo={
              headerBonus?.value?.standardised_logo_url_object ||
              headerBonus?.value?.logo_url_object
            }
            operator={headerBonus?.value}
            template={pageTemplate}
          />
        </div>
      )}
    </div>
  );
};

TemplateOneThree.propTypes = {
  relation: PropTypes.shape({
    type: PropTypes.string,
    template: PropTypes.string,
    name: PropTypes.string,
    rating: PropTypes.string,
    status: PropTypes.string,
  }),
  name: PropTypes.string,
  type: PropTypes.string,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  sections: PropTypes.shape({}),
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  template: PropTypes.string,
  description: PropTypes.string,
  icon: PropTypes.node,
  CostumeComponent: PropTypes.node,
};

export default TemplateOneThree;
