/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import loadable from '@loadable/component';
import PropTypes from 'prop-types';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Link from 'gatsby-core-theme/src/hooks/link';
import { translate, imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from '~context/MainProvider';
import styles from './operator-details.module.scss';
import PrettyLink from '~atoms/pretty-link';

const OperatorDetails = ({
  item,
  prettyLinkTracker = false,
  costumeStyle,
  template,
  ribbons,
  tracker = 'main',
  showRating = true,
  showAuthor = true,
  showReviewLink = true,
  showRibbon = false,
  contentRibbon = false,
  showRatingLabel = false,
  showRatingDecimal = false,
  authorTemplateTwo = false,
  reviewNoFollow = false,
  imageWidth = 96,
  imageHeight = 96,
  icon = '../../../../images/verifiedAuthor.svg',
  imageLoad = 'lazy',
  showNonActiveRibbons = false,
  isPPC,
  ribbonText = {
    inactive_ribbon: 'Inactive',
    coming_soon_ribbon: 'coming soon',
    not_recommended_ribbon: 'not recommended',
    blacklisted_ribbon: 'blacklisted',
  },
  module = '',
}) => {
  const { translations } = useContext(Context) || {};

  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?.standardised_logo_url_object ||
    item?.logo_url_object ||
    item?.relation?.standardised_logo_url_object ||
    item?.relation?.logo_url_object;

  const reviewPath = item?.review_link ? item?.review_link : item?.path || null;

  const rating = item?.rating || item?.relation?.rating;

  const StarRating =
    // eslint-disable-next-line no-nested-ternary
    showRating
      ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
      : null;

  const ReviewLink = showReviewLink
    ? loadable(() => import('gatsby-core-theme/src/components/atoms/review-link'))
    : null;

  const Author =
    // eslint-disable-next-line no-nested-ternary
    showAuthor ? loadable(() => import('../../atoms/author/index')) : null;

  // eslint-disable-next-line react/prop-types
  const Tag = ({ children, classStyle = '' }) =>
    prettyLinkTracker ? (
      <PrettyLink
        operator={item}
        pageTemplate={template}
        module={module}
        tracker={trackerType}
        clickedElement="logo"
        className={classStyle}
      >
        {children}
      </PrettyLink>
    ) : (
      <Link to={reviewPath} className={classStyle}>
        {children}
      </Link>
    );

  return (
    <div className={`${styles.operatorDetails} ${costumeStyle}`}>
      <Tag classStyle="Logo cta">
        <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 && (
                <span className={`${styles.ribbon} ${contentRibbon && styles.contentRibbon}`}>
                  {ribbons[0]}
                </span>
              )
            : showNonActiveRibbons && (
                <span
                  className={`${styles.ribbon} ${contentRibbon && styles.contentRibbon} ${
                    styles[status] || ''
                  }`}
                >
                  {translate(translations, `${status}_ribbon`, ribbonText[`${status}_ribbon`])}
                </span>
              ))}
      </Tag>

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

        {(showAuthor || showRating) && (
          <div
            className={`${styles.ratingAuthor}
          `}
          >
            {showRating && (
              <StarRating
                numOfStars={5}
                rating={rating}
                showLabel={showRatingLabel}
                showDecimal={showRatingDecimal}
              />
            )}
            {showAuthor && (
              <Author
                label={translate(translations, 'byAuthor', 'By')}
                authorTemplateTwo={authorTemplateTwo}
                authorName={item?.authorName || item?.author?.name}
                authorPath={isPPC ? null : item?.authorPath || item?.author?.profile_page_path}
                authorImage={item?.authorImage || item?.author?.image}
                verify={icon}
              />
            )}
          </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.string,
    status: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      rating: PropTypes.string,
      standardised_logo_url_object: PropTypes.shape({}),
      logo_url_object: PropTypes.shape({}),
      status: PropTypes.string,
    }),
    standardised_logo_url_object: PropTypes.shape({}),
    logo_url_object: PropTypes.shape({}),

    authorName: PropTypes.string,
    authorPath: PropTypes.string,
    authorImage: 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,
  authorTemplateTwo: PropTypes.bool,
  showRibbon: PropTypes.bool,
  template: PropTypes.string,
  imageWidth: PropTypes.number,
  imageHeight: PropTypes.number,
  ribbons: PropTypes.arrayOf(PropTypes.string),
  icon: PropTypes.string,
  showRatingLabel: PropTypes.bool,
  showRatingDecimal: PropTypes.bool,
  contentRibbon: PropTypes.bool,
  ribbonText: PropTypes.shape({}),
  showNonActiveRibbons: PropTypes.bool,
  isPPC: PropTypes.bool,
  module: PropTypes.string,
};

export default OperatorDetails;
