import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import styles from './slot.module.scss';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import OperatorBanner from '~atoms/header-operator-bannner';
import Rating from '~atoms/ratings';
import { TrackingKeys } from '~constants/tracking-api'

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


export default function SlotHeader({
  page,
  image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
  showExtraRatings = false,
  width = 170,
  height = 170,
  moduleName = TrackingKeys?.HEADERSLOTS
}) {
  const imageObject = page.relation?.logo;

  const averageRating = page.relation?.average_rating;
  // eslint-disable-next-line react/prop-types
  const headerBonus = page?.sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
  return (
    <div className={styles.parentContainer}>
      <div className={styles.slotHeader}>
        <div className={styles.data}>
          <img
            alt={getAltText(imageObject?.alt, page?.relation?.name)}
            src={imagePrettyUrl(imageObject?.filename, width, height)}
            width={width}
            height={height}
            loading="eager"
          />

          <div>
            <div className={styles.operatorName}>
              <h1>{page?.title}</h1>
              {image}
            </div>
            <div className={styles.averageRating}>
              <FaStar title="Star Icon" s />
              <p>{averageRating}/</p>
              <p>5</p>
            </div>
          </div>
        </div>
        <Rating item={page.relation} type="game" />
        {showExtraRatings && (
          <div className={styles.extraRatings}>
            <Rating item={page.relation} type="extraRatings" />{' '}
          </div>
        )}
        {headerBonus && (
          <OperatorBanner
            logo={headerBonus?.value?.logo}
            operator={headerBonus?.value}
            template={page?.template}
            moduleName={moduleName} 
            clickedElement="header_operator_banner" 
          />
        )}
      </div>
    </div>
  );
}

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

SlotHeader.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.number,
      logo: PropTypes.PropTypes.shape({
      }),
      slot: PropTypes.shape({
        name: PropTypes.string,
        game_provider: PropTypes.string,
      }),
      markets: PropTypes.shape({
        ie_en: PropTypes.shape({
          first_rating: PropTypes.number,
        }),
      }),
      affiliate_games: PropTypes.shape({
        ie_en: PropTypes.shape({
          status: PropTypes.string,
        }),
      }),
    }),
  }),
  image: PropTypes.element,
  showExtraRatings: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  moduleName: PropTypes.string,
};
