import React from 'react';
import PropTypes from 'prop-types';

import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
import Link from 'gatsby-core-theme/src/hooks/link';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import OperatorBanner from '../../../../../atoms/header-operator-bannner';
import styles from './template-two.module.scss';
import Rating from '../../../../../atoms/ratings';

const TemplateTwo = ({ page, image }) => {
  const imageObject =
    page.relation?.standardised_logo_filename_object || page.relation?.thumbnail_filename_object;

  // eslint-disable-next-line react/prop-types
  const headerBonus = page?.sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
  return (
    <div className={styles.container}>
      <div className={styles.topSection}>
        <LazyImage
          alt={getAltText(imageObject?.alt, page?.relation?.name)}
          src={imagePrettyUrl(imageObject.filename, 259, 259)}
          width={259}
          height={259}
          loading="eager"
        />
        <div className={styles.topContent}>
          <div className={styles.name}>
            <h1>{page?.title}</h1>
            <LazyImage
              alt="icon"
              src={image || '../../../../../../images/verify.svg'}
              width={24}
              height={24}
              loading="eager"
            />
          </div>
          <Rating item={page.relation} type="game" />
          <span className={styles?.ratingGuideline || ''}>
            This unbiased rating score is given by our casino & gambling experts according to our
            <Link to="rating-guide">Rating Guidelines</Link> to provide honest reviews
          </span>
        </div>
      </div>
      {headerBonus && (
        <OperatorBanner
          logo={
            headerBonus?.value?.standardised_logo_url_object || headerBonus?.value?.logo_url_object
          }
          operator={headerBonus?.value}
          template={page?.template}
        />
      )}
      <Tnc operator={headerBonus?.value} hasCollapse={false} isFixed />
    </div>
  );
};

export default TemplateTwo;

TemplateTwo.propTypes = {
  page: PropTypes.shape({
    title: PropTypes.string,
  }),
};

TemplateTwo.propTypes = {
  page: PropTypes.shape({
    featured_image_object: PropTypes.string,
    banner: PropTypes.string,
    title: PropTypes.string,
    template: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      volatility: PropTypes.number,
      average_rating: PropTypes.string,
      thumbnail_filename_object: PropTypes.string,
      standardised_logo_filename_object: PropTypes.string,
      slot: PropTypes.shape({
        name: PropTypes.string,
        game_provider: PropTypes.string,
      }),
      markets: PropTypes.shape({
        ie_en: PropTypes.shape({
          first_rating: PropTypes.string,
        }),
      }),
      affiliate_games: PropTypes.shape({
        ie_en: PropTypes.shape({
          status: PropTypes.string,
        }),
      }),
    }),
  }),
  image: PropTypes.string,
};
