import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Button from 'gatsby-core-theme/src/components/atoms/button/button';
import {
  imagePrettyUrl,
  getAltText,
  translate,
  getBonus,
  getExtraField,
} from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import styles from './template-two.module.scss';

export default function TemplateTwo({ extraFields, imageObj }) {
  const { translations } = useContext(Context);
  const operator = getExtraField(extraFields, 'operator');
  const oneLiner = getBonus('main', operator);
  const link = getExtraField(extraFields, 'link');

  return (
    <div className={`${styles.templateTwo} ${!imageObj && styles.blendColors}`}>
      <div className={styles.headerContainer}>
        <span className={styles.bonusText}>{`${translate(
          translations,
          'welcome_bonus',
          'Welcome bonus'
        )}`}</span>
        {oneLiner && <h1>{oneLiner.one_liner.replace('+', '&')}</h1>}
        {link && (
          <Button
            to={link}
            buttonType="secondary"
            gtmClass="default-header-template-two-gtm btn-cta"
            btnText={translate(translations, 'online_casino', link)}
            icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
          />
        )}
        {getExtraField(operator?.extra_fields, 'terms_and_conditions_text_enabled') === '1' && (
          <span className={styles.tnc}>
            <Tnc hasCollapse={false} operator={operator} />
          </span>
        )}
      </div>
      {imageObj && (
        <div className={styles.imgContainer}>
          <LazyImage
            src={imagePrettyUrl(imageObj.filename, imageObj.width, imageObj.height)}
            alt={getAltText(imageObj, imageObj.title)}
            width={imageObj.width}
            height={imageObj.height}
            loading="eager"
          />
        </div>
      )}
    </div>
  );
}

TemplateTwo.propTypes = {
  imageObj: PropTypes.shape({
    alt: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    filename: PropTypes.string,
    title: PropTypes.string,
  }),
  extraFields: PropTypes.shape({
    link: PropTypes.string,
    operator: PropTypes.shape({
      extra_fields: PropTypes.shape({
        one_liners: PropTypes.shape({
          main: PropTypes.shape({
            one_liner: PropTypes.string,
          }),
        }),
      }),
    }),
  }),
};
