/* eslint-disable react/no-danger */
/* eslint-disable camelcase */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
import { generatePlaceholderString } from 'gatsby-core-theme/src/helpers/generators.mjs';
import { formatDate } from 'gatsby-core-theme/src/helpers/date-time';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Ratings from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import getOperatorForSummary from '../../../../helpers/operator';
import Author from '../../../atoms/author/template-one';
import OperatorBanner from '../../../atoms/header-operator-bannner';
import styles from './template-one.module.scss';

const TemplateOne = ({
  page,
  imgWidth = 128,
  imgHeight = 146,
  operatorImg = true,
  extraField = null,
  showExperience = false,
}) => {
  const { translations } = useContext(Context) || {};

  const operatorDetails = getOperatorForSummary(page);

  if (!operatorDetails) {
    return <></>;
  }

  const operatorData = operatorDetails[0];
  const operatorSummary = operatorDetails[1];

  const { standardised_logo_url_object, logo_url_object, name } = operatorData;
  const author = page.reviewer_id ? page?.reviewer : null;
  const img = operatorImg
    ? standardised_logo_url_object?.filename || logo_url_object?.filename
    : author?.image;
  const title = generatePlaceholderString(
    translate(translations, 'expert_casino_review_title', 'Expert Casino Review'),
    translations,
    operatorData
  );
  return (
    <div className={styles?.summaryLayout || ''}>
      <div className={styles.details}>
        <h2>{title}</h2>
        <div className={styles.img}>
          <LazyImage src={imagePrettyUrl(img)} width={imgWidth} height={imgHeight} alt={name} />
          {operatorImg && <Ratings rating={operatorData?.rating} />}
        </div>
        {author && (
          <div className={styles.author}>
            <Author
              label="By"
              authorName={author?.name}
              verify={imagePrettyUrl(author?.image)}
              authorPath={author?.profile_page_path}
            />
            <span>
              {author?.pages_count} {translate(translations, 'reviews', 'Reviews')}
            </span>
            <p>
              {translate(translations, 'updated_on', 'Updated on')} {formatDate(page.updated_at)}
            </p>
            {showExperience && author?.experience && (
              <div className={styles.experience}>{author?.experience}</div>
            )}
          </div>
        )}
        {operatorSummary && (
          <div
            className={styles.description}
            dangerouslySetInnerHTML={{ __html: operatorSummary }}
          />
        )}
      </div>
      <OperatorBanner
        logo={standardised_logo_url_object || logo_url_object}
        operator={operatorData}
        template={page?.template}
        module="operator_summary"
      />
      {extraField && (
        <div className={styles.extraField} dangerouslySetInnerHTML={{ __html: extraField }} />
      )}
    </div>
  );
};
TemplateOne.propTypes = {
  imgWidth: PropTypes.string,
  imgHeight: PropTypes.string,
  extraField: PropTypes.string,
  showExperience: PropTypes.bool,
  operatorImg: PropTypes.bool,
  page: PropTypes.shape({
    reviewer: PropTypes.shape({}),
    reviewer_id: PropTypes.number,
    relation_type: PropTypes.string,
    extra_fields: PropTypes.shape({}),
    template: PropTypes.string,
    updated_at: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      logo_url: PropTypes.string,
    }),
  }),
};
export default TemplateOne;
