import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import {
  translate,
  imagePrettyUrl,
  getAltText,
  getObjectValue,
} 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 OneStar from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import { operatorRatings } from '../../../../../../constants/ratings-constant';
import OperatorBanner from '../../../../../atoms/header-operator-bannner';
import PrettyLink from '~atoms/pretty-link';

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

const TemplateFive = ({
  relation,
  image,
  name,
  pageTemplate,
  featureImg,
  extraFields,
  type,
  numOfStars = 5,
  icon,
}) => {
  const { translations } = useContext(Context) || {};

  const logo = () => (
    <PrettyLink
      operator={relation}
      pageTemplate={pageTemplate}
      module="header_operator"
      tracker="main"
      clickedElement="logo"
      className="header-gtm logo-cta "
    >
      <LazyImage
        loading="eager"
        src={imagePrettyUrl(image?.filename, 208, 208)}
        width={208}
        height={208}
        alt={getAltText(image, relation?.name)}
      />
    </PrettyLink>
  );

  const header = () => (
    <div className={`${styles.header}`}>
      <div className={`${styles.name} `}>
        <h1>{name}</h1>
        <LazyImage
          src={icon || '../../../../../../images/verify.svg'}
          loading="eager"
          alt="Verified"
          width={24}
          height={24}
        />
      </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" />
          {translate(translations, '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}
              dangerouslySetInnerHTML={{ __html: extraFields?.summary }}
            />
          )}
          <div className={styles.ratings}>
            {operatorRatings[type]?.slice(0, 3)?.map((elm) => {
              const value = getObjectValue(relation, elm?.fieldValue);
              return (
                <div className>
                  <span className={styles.ratingLabel}>
                    {translate(translations, 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} />
                </div>
              );
            })}
          </div>
        </div>

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

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

TemplateFive.propTypes = {
  relation: PropTypes.shape({
    type: PropTypes.string,
    template: PropTypes.string,
    name: PropTypes.string,
    rating: PropTypes.string,
    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.node,
};

export default TemplateFive;
