import React from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
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 Verify from '../../../../../../static/icons/verify';
import styles from './header.module.scss';
import PrettyLink from '~atoms/pretty-link';

const TemplateOneTwo = ({ relation, type, pageTemplate, numOfStars = 5, title }) => {
  const ribbon = relation?.ribbons?.length > 0 ? relation?.ribbons[0] : null;
  const image = relation?.standardised_logo_url_object || relation?.logo_url_object;

  const logo = () => (
    <LazyImage
      loading="eager"
      src={imagePrettyUrl(image?.filename, 179, 179)}
      width={179}
      height={179}
      alt={getAltText(image, relation?.name)}
    />
  );

  return (
    <div className={`${styles.container}`}>
      <div className={`${styles.topSection}`}>
        {['coming_soon', 'inactive'].includes(relation?.status) ? (
          logo()
        ) : (
          <PrettyLink
            operator={relation}
            pageTemplate={pageTemplate}
            module="header_operator"
            tracker="main"
            clickedElement="logo"
            className="header-gtm logo-cta "
          >
            {logo()}
          </PrettyLink>
        )}
        {}
        <div className={`${styles.topContent}`}>
          <div className={styles.name}>
            <h1>{title}</h1>
            <Verify />
          </div>
          {ribbon && <p className={`${styles.ribbon}`}>{ribbon}</p>}
          {!['coming_soon', 'inactive'].includes(relation?.status) && (
            <StarRating
              numOfStars={numOfStars}
              rating={numOfStars < 6 ? relation?.rating : Math.round(relation?.rating * 2)}
              icon={<FaStar size={18} color="#FFDB20" title="Star Icon" />}
              showDot={false}
            />
          )}
        </div>
      </div>
      <Rating item={relation} type={type} numOfStars={numOfStars} />
      <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,
    standardised_logo_url_object: PropTypes.shape({}),
    logo_url_object: PropTypes.shape({}),
    ribbons: PropTypes.PropTypes.arrayOf(PropTypes.shape({})),
  }),
  name: PropTypes.string,
  type: PropTypes.string,
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  title: PropTypes.string,
};

export default TemplateOneTwo;
