/* 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 { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus/template-one';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import getOperatorForSummary from '../../../../helpers/operator';
import AuthorName from '../../../atoms/author/template-one';
import styles from './template-three.module.scss';

const TemplateThree = ({
  page,
  tnc = false,
  tncFixed = false,
  imgWidth = 128,
  imgHeight = 146,
  verify = '../../../../images/verifiedAuthor.svg',
  tncContainer = false,
}) => {
  const { translations } = useContext(Context) || {};

  const operatorDetails = getOperatorForSummary(page);

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

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

  const author = page.reviewer_id ? page?.reviewer : null;
  const title = generatePlaceholderString(
    translate(translations, 'expert_casino_review_title', 'Expert Casino Review [operator_name]'),
    translations,
    operatorData
  );

  const showTnc =
    tncContainer && operatorData?.extra_fields?.terms_and_conditions_text_enabled === '1';

  return (
    <div className={`${styles?.summaryLayout || ''} ${showTnc ? styles.tncContainer : ''}`}>
      <div className={styles.details}>
        <h2>{title}</h2>

        {operatorSummary && (
          <div
            className={styles.description}
            dangerouslySetInnerHTML={{ __html: operatorSummary }}
          />
        )}
        {author && (
          <div className={styles.author}>
            <LazyImage
              src={imagePrettyUrl(author?.image)}
              width={imgWidth}
              height={imgHeight}
              alt={author?.name}
            />
            <div>
              <AuthorName verify={verify} authorName={author?.name} />
              <span>{author?.author_title}</span>
            </div>
          </div>
        )}
      </div>
      <Bonus
        tncFixed={tncFixed}
        tncEnable={tnc}
        operator={operatorData}
        template={page?.template}
        module={{ name: 'operator_summary' }}
      />

      {showTnc && (
        <span className={styles?.tnc || ''}>
          <Tnc
            operator={operatorData}
            hasCollapse={false}
            contentText={operatorData?.extra_fields?.terms_and_conditions}
          />
        </span>
      )}
    </div>
  );
};

TemplateThree.propTypes = {
  imgWidth: PropTypes.string,
  imgHeight: PropTypes.string,
  tnc: PropTypes.bool,
  tncFixed: PropTypes.bool,
  verify: PropTypes.string,
  tncContainer: PropTypes.bool,
  page: PropTypes.shape({
    reviewer: PropTypes.shape({}),
    relation_type: PropTypes.string,
    reviewer_id: PropTypes.number,
    extra_fields: PropTypes.shape({}),
    template: PropTypes.string,
    updated_at: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      logo_url: PropTypes.string,
    }),
  }),
};

export default TemplateThree;
