/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import Link from '~hooks/link';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import MultiStarRating from '~molecules/star-rating/';
import StarRating from '~molecules/star-rating/one-star';
import ReviewLink from '~atoms/review-link';
import Ribbons from '~atoms/ribbons';
import useTranslate from '~hooks/useTranslate/useTranslate';
import PrettyLink from '~atoms/pretty-link';
import VerifiedAuthor from '../../../images/icons/verified-author';
import Author from '../../atoms/author/template-one';
import VerificationFlagBadge from '../../atoms/verification-badge/template-two';
import styles from './operator-details.module.scss';

const OperatorDetails = ({
  item,
  prettyLinkTracker = true,
  costumeStyle,
  template,
  ribbons,
  tracker = 'main',
  showRating = true,
  showAuthor = true,
  showReviewLink = true,
  showAuthorAsLink = true,
  showRibbon = false,
  contentRibbon = false,
  useOneStarRating = true,
  showRatingLabel = false,
  showRatingDecimal = false,
  authorTemplateTwo = false,
  reviewNoFollow = false,
  imageWidth = 96,
  imageHeight = 96,
  icon = <VerifiedAuthor />,
  imageLoad = 'lazy',
  showNonActiveRibbons = false,
  isPPC,
  ribbonText = {
    inactive_ribbon: 'Inactive',
    coming_soon_ribbon: 'coming soon',
    not_recommended_ribbon: 'not recommended',
    blacklisted_ribbon: 'blacklisted',
  },
  moduleName = '',
  showRoundedRating = false,
  modulePosition,
  itemPosition,
  showVerificationBadge = false,
}) => {
  const itemName = item?.name || item?.relation?.name;
  const status = item?.status || item?.relation?.status;
  const hasRibbons = typeof ribbons !== 'undefined' && ribbons.length > 0;
  const trackerType = tracker.toLowerCase().replace(' ', '_');

  const image = item?.logo;
  const reviewPath = item?.review_link ? item?.review_link : item?.path || null;
  const rating = item?.rating || item?.relation?.rating;

  // eslint-disable-next-line react/prop-types
  const Tag = ({ children, classStyle = '', clickedElement = 'operator_logo' }) =>
    prettyLinkTracker ? (
      <PrettyLink
        operator={item?.relation || item}
        pageTemplate={template}
        moduleName={moduleName}
        tracker={trackerType}
        clickedElement={clickedElement}
        className={`${classStyle}`}
        modulePosition={modulePosition}
        itemPosition={itemPosition}
      >
        {children}
      </PrettyLink>
    ) : (
      <Link to={reviewPath} className={classStyle}>
        {children}
      </Link>
    );

  return (
    <div className={`${styles.operatorDetails} ${costumeStyle}`}>
      <Tag classStyle="logo-cta-gtm">
        <LazyImage
          src={imagePrettyUrl(image?.filename, imageWidth, imageHeight)}
          alt={getAltText(image, itemName)}
          width={imageWidth}
          height={imageHeight}
          className={styles.image}
          loading={imageLoad}
        />
        {showRibbon &&
          !contentRibbon &&
          (status === 'active'
            ? hasRibbons && (
                <Ribbons
                  item={[ribbons[0]]}
                  customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon}`}
                />
              )
            : showNonActiveRibbons && (
                <Ribbons
                  item={[useTranslate(`${status}_ribbon`, ribbonText[`${status}_ribbon`])]}
                  customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon} ${
                    styles[status] || ''
                  }`}
                />
              ))}
      </Tag>

      <div className={styles.details}>
        {showRibbon &&
          contentRibbon &&
          (status === 'active'
            ? hasRibbons && (
                <Ribbons
                  item={[ribbons[0]]}
                  customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon}`}
                />
              )
            : showNonActiveRibbons && (
                <Ribbons
                  item={[useTranslate(`${status}_ribbon`, ribbonText[`${status}_ribbon`])]}
                  customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon} ${
                    styles[status] || ''
                  }`}
                />
              ))}
        <Tag classStyle={`${styles.operatorName} name-cta `} clickedElement="operator_name">
          {itemName}
        </Tag>

        {(showAuthor || showRating) && (
          <div
            className={`${styles.ratingAuthor}
          ${(!useOneStarRating && styles.starRatings) || ''}
          ${(showRatingLabel && useOneStarRating && styles.ratinglabel) || ''}`}
          >
            {showVerificationBadge && item?.status === 'active' && <VerificationFlagBadge />}
            {showRating &&
              (useOneStarRating ? (
                <StarRating
                  numOfStars={5}
                  rating={rating}
                  showLabel={showRatingLabel}
                  showDecimal={showRatingDecimal}
                  showRoundedRating={showRoundedRating}
                />
              ) : (
                <MultiStarRating
                  numOfStars={5}
                  rating={rating}
                  showLabel={showRatingLabel}
                  showDecimal={showRatingDecimal}
                  showRoundedRating={showRoundedRating}
                />
              ))}
            {showAuthor && (
              <Author
                label={useTranslate('byAuthor', 'By')}
                authorTemplateTwo={authorTemplateTwo}
                authorName={item?.author_name || item?.author?.name}
                authorPath={isPPC ? null : item?.author_path || item?.author?.profile_page_path}
                authorImage={item?.author_image || item?.author?.image}
                verify={icon}
                showLinks={showAuthorAsLink}
              />
            )}
          </div>
        )}
        {reviewPath && showReviewLink && (
          <ReviewLink
            className={`${styles?.reviewLink || ''} toplist-variant-one-gtm`}
            template={template}
            operatorName={itemName}
            reviewPath={reviewPath}
            nofollow={reviewNoFollow}
          />
        )}
      </div>
    </div>
  );
};

OperatorDetails.propTypes = {
  imageLoad: PropTypes.string,
  item: PropTypes.shape({
    name: PropTypes.string,
    title: PropTypes.string,
    review_link: PropTypes.string,
    path: PropTypes.string,
    rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    status: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      status: PropTypes.string,
    }),
    logo: PropTypes.shape({}),

    author_name: PropTypes.string,
    author_path: PropTypes.string,
    author_image: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
      profile_page_path: PropTypes.string,
      image: PropTypes.string,
    }),
  }),
  costumeStyle: PropTypes.string,
  reviewNoFollow: PropTypes.bool,
  prettyLinkTracker: PropTypes.bool,
  tracker: PropTypes.string,
  showRating: PropTypes.bool,
  showAuthor: PropTypes.bool,
  showReviewLink: PropTypes.bool,
  showAuthorAsLink: PropTypes.bool,
  authorTemplateTwo: PropTypes.bool,
  showRibbon: PropTypes.bool,
  template: PropTypes.string,
  imageWidth: PropTypes.number,
  imageHeight: PropTypes.number,
  ribbons: PropTypes.arrayOf(PropTypes.string),
  icon: PropTypes.element,
  useOneStarRating: PropTypes.bool,
  showRatingLabel: PropTypes.bool,
  showRatingDecimal: PropTypes.bool,
  contentRibbon: PropTypes.bool,
  ribbonText: PropTypes.shape({}),
  showNonActiveRibbons: PropTypes.bool,
  isPPC: PropTypes.bool,
  moduleName: PropTypes.string,
  showRoundedRating: PropTypes.bool,
  modulePosition: PropTypes.number,
  itemPosition: PropTypes.number,
  showVerificationBadge: PropTypes.bool,
};

export default OperatorDetails;
