/* eslint-disable react/no-danger */
/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl } 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 Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import Ratings from 'gatsby-core-theme/src/components/molecules/star-rating/index';
import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
import useTranslate from '~hooks/useTranslate/useTranslate';
import getOperatorForSummary from '../../../../helpers/operator';
import { TrackingKeys } from '~constants/tracking-api'
import Author from '../../../atoms/author/template-one';

import styles from './template-two.module.scss';

const TemplateTwo = ({
  page,
  imgWidth = 128,
  imgHeight = 146,
  operatorImg = true,
  authorImgWidth = 24,
  authorImgHeight = 24,
  moduleName =  TrackingKeys?.OPERATORSUMMARY,
  modulePosition
}) => {
  const operatorDetails = getOperatorForSummary(page);

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

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

  const { name } = operatorData;
  const imageObject = operatorData?.logo;
  const author = page.author_id ? page?.author : null;
  const img = operatorImg ? imageObject : author?.image;

  const title = generatePlaceholderString(
    useTranslate('expert_casino_review_title', 'Expert Casino Review'),
    {},
    operatorData
  );

  return (
    <div className={styles?.summaryLayout || ''}>
      <div className={styles.details}>
        <div className={styles.img}>
          <LazyImage
            src={imagePrettyUrl(img?.filename, imgWidth, imgHeight)}
            width={imgWidth}
            height={imgHeight}
            alt={name}
          />
        </div>
        <div className={styles.title}>
          <h2>{title}</h2>
          <Ratings halfStars={false} rating={operatorData?.rating} numOfStars={5} />
          <p>
            {useTranslate('published_on', 'Published on')} {formatDate(page.updated_at)}
          </p>
        </div>
        {operatorSummary && (
          <div
            className={styles.description}
            dangerouslySetInnerHTML={{ __html: operatorSummary }}
          />
        )}

        {author && (
          <div className={styles.author}>
            <LazyImage
              src={imagePrettyUrl(author?.image, authorImgWidth, authorImgHeight)}
              width={authorImgWidth}
              height={authorImgHeight}
              alt={author?.name}
            />
            <Author label={useTranslate('By', 'By')} authorName={author?.name} authorPath={author?.profile_page_path} />
            <span>
              {author?.pages_count} {useTranslate('reviews', 'Reviews')}
            </span>
          </div>
        )}
      </div>

      <OperatorBanner
        moduleName={moduleName}
        logo={imageObject}
        operator={operatorData}
        template={page?.template}
        modulePosition={modulePosition}
      />
      <Tnc operator={operatorData} isFixed />
    </div>
  );
};

TemplateTwo.propTypes = {
  moduleName:  PropTypes.string,
  imgWidth: PropTypes.string,
  imgHeight: PropTypes.string,
  operatorImg: PropTypes.bool,
  page: PropTypes.shape({
    relation_type: PropTypes.string,
    author: PropTypes.shape({}),
    author_id: PropTypes.number,
    extra_fields: PropTypes.shape({}),
    template: PropTypes.string,
    updated_at: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      logo_url: PropTypes.string,
    }),
  }),
  authorImgWidth: PropTypes.number,
  authorImgHeight: PropTypes.number,
  modulePosition: PropTypes.number,
};

export default TemplateTwo;
