import React, { useContext } from 'react';
import PropTypes from 'prop-types';
// eslint-disable-next-line import/no-extraneous-dependencies
import { translate, imagePrettyUrl, getAltText } 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 VariableComponent from '../variables';
import styles from './template-one-two.module.scss';
import PrettyLink from '~atoms/pretty-link';

const TemplateOneTwo = ({
  relation,
  type,
  image,
  name,
  ribbons,
  pageTemplate,
  numOfStars = 5,
  icon,
  hasVariableComponent = false,
  template = 'template_one',
}) => {
  const { translations } = useContext(Context) || {};

  const ribbon = ribbons?.length > 0 ? ribbons[0] : null;

  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, 179, 179)}
        width={179}
        height={179}
        alt={getAltText(image, relation?.name)}
      />
    </PrettyLink>
  );

  return (
    <div
      className={`${styles.container} ${
        template === 'template_two' && styles.templateTwoContainer
      } ${hasVariableComponent ? styles.hasVariableComponent : ''}`}
    >
      <div
        className={`${styles.topSection} ${
          template === 'template_two' && styles.templateTwoTopSection
        }`}
      >
        {logo()}
        <div
          className={`${styles.topContent} ${
            template === 'template_two' && styles.templateTwoTopContent
          }`}
        >
          <div className={styles.name}>
            <h1>{name}</h1>
            <LazyImage
              src={icon || '../../../../../../images/verify.svg'}
              loading="eager"
              alt="Verified"
              width={24}
              height={24}
            />
          </div>
          {ribbon && (
            <p
              className={`${styles.ribbon} ${
                template === 'template_two' && styles.templateTwoRibbon
              }`}
            >
              {ribbon}
            </p>
          )}
          {!['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}
            />
          ) : (
            <div className={styles.ratingInactive}>
              <FaStar title="Star Icon" />
              {translate(translations, 'tba', 'TBA')}
            </div>
          )}
        </div>
      </div>
      <Rating item={relation} type={type} numOfStars={numOfStars} />

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

      <OperatorBanner logo={image} operator={relation} template={pageTemplate} />
    </div>
  );
};

TemplateOneTwo.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,
  hasVariableComponent: PropTypes.bool,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  ribbons: PropTypes.PropTypes.arrayOf(PropTypes.shape({})),
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  template: PropTypes.string,
  icon: PropTypes.node,
};

export default TemplateOneTwo;
