import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
// eslint-disable-next-line import/no-extraneous-dependencies
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import LazyImage from '~hooks/lazy-image';
import StarRating from '~molecules/star-rating/one-star';
import OperatorBanner from '~atoms/header-operator-bannner';
import Ribbon from '~atoms/ribbons';
import Rating from '~atoms/ratings';
import useTranslate from '~hooks/useTranslate/useTranslate';
import VariableComponent from '../variables';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './template-four.module.scss';
import PrettyLink from '~atoms/pretty-link';

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

const TemplateFour = ({
  relation,
  type,
  image,
  name,
  ribbons,
  pageTemplate,
  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
  numOfStars = 5,
  hasVariableComponent = false,
  showRoundedRating = false,
  width = 300,
  height = 300,
  moduleName = TrackingKeys?.HEADEROPERATOR
}) => {
  const ribbon = ribbons?.length > 0 ? ribbons[0] : null;

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

  return (
    <div
      className={`${styles.container} ${hasVariableComponent ? styles.hasVariableComponent : ''}`}
    >
      <div className={styles.topSection}>
        {logo()}

        {!['coming_soon', 'inactive'].includes(relation?.status) ? (
          <StarRating
            numOfStars={numOfStars}
            rating={numOfStars < 6 ? relation?.rating : Math.round(relation?.rating * 2)}
            icon={<FaStar title="Star Icon" />}
            showDot={false}
            showRoundedRating={showRoundedRating}
          />
        ) : (
          <div className={styles.ratingInactive}>
            <FaStar title="Star Icon" />
            {useTranslate('tba', 'TBA')}
          </div>
        )}
      </div>
      <div className={styles.bottomSection}>
        <div className={styles.name}>
          <h1>{name}</h1>
          {icon}
        </div>
        {ribbon && <Ribbon item={[ribbon]} customStyle={styles.ribbon} />}
        <div className={styles.ratings}>
          <Rating item={relation} type={type} numOfStars={numOfStars} />
        </div>
        <OperatorBanner logo={image} operator={relation} template={pageTemplate} moduleName={moduleName} clickedElement="header_operator_banner" />

        {hasVariableComponent && (
          <VariableComponent
            relation={relation}
            pageTemplate={pageTemplate}
            className={styles.variable}
          />
        )}
      </div>
    </div>
  );
};

TemplateFour.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,
  type: PropTypes.string,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  ribbons: PropTypes.PropTypes.arrayOf(PropTypes.string),
  pageTemplate: PropTypes.string,
  hasVariableComponent: PropTypes.bool,
  numOfStars: PropTypes.number,
  icon: PropTypes.element,
  showRoundedRating: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  moduleName: PropTypes.string,
};

export default TemplateFour;
