/* eslint-disable camelcase */
import React, { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
import LazyImage from '~hooks/lazy-image';
import isSticky from '~hooks/stickyOnScroll';
import BonusBox from '~molecules/bonus-box/template-four';
import OperatorCta from '~atoms/button/operator-cta';
import Rating from '~molecules/star-rating/one-star';
import Tnc from '~molecules/tnc';
import { Context } from '~context/MainProvider';
import styles from './bonus.module.scss';

export default function TemplateOne({
  operator,
  stickyOffset = 0,
  pageTemplate,
  module = {
    name: 'bonus',
  },
  tncEnable = true,
  tncFixed = false,
  showOnLoad = false,
  showWelcomeText = true,
  floating = false,
}) {
  const prettyLink = prettyTracker(
    operator,
    module?.tracking_link_name || 'main',
    false,
    pageTemplate
  );

  const [show, setShow] = useState(showOnLoad);
  const [closed, setClosed] = useState(false);
  const { cookieAccepted, setBannerActive, translations } = useContext(Context) || {};
  const { standardised_logo_url, logo_url, bonus, name } = operator || {};
  const logo = standardised_logo_url || logo_url;

  const showTncFixed = tncEnable && tncFixed;

  const translationsObj = {
    active: {
      translationKey: translations?.play_now_banner ? 'play_now_banner' : 'play_now',
      defaultValue: 'Play',
    },
  };
  // eslint-disable-next-line no-unused-expressions
  isSticky(stickyOffset, setShow);
  useEffect(() => {
    // eslint-disable-next-line no-unused-expressions
    setBannerActive(show);
  });

  const clickHandler = () => {
    setShow(false);
    setClosed(true);
  };

  return (
    !closed && (
      <div
        className={`${styles.operatorBanner || ''} ${show && styles.show} ${
          cookieAccepted && (styles.cookieAccepted || '')
        } ${tncEnable ? styles.tncEnable : ''} ${showTncFixed ? styles.showTncFixed || '' : ''} ${
          floating ? styles.floating : ''
        }
        `}
      >
        <div className={styles.container}>
          <div>
            <a
              href={prettyLink}
              className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
              title={operator?.name}
              target="_blank"
              rel="noreferrer sponsored"
              aria-label={`${operator?.name} Link`}
            >
              <LazyImage
                alt={operator?.name}
                src={imagePrettyUrl(logo, 120, 120)}
                loading="eager"
                height={120}
                width={100}
              />
              <div className={styles.details}>
                {name && <span>{name}</span>}
                {bonus?.rating && <Rating rating={bonus?.rating} showDecimal />}
              </div>
            </a>
            <div className={styles.bonus || ''}>
              {showWelcomeText && (
                <p className={styles.welcomeBonus}>
                  {translate(translations, 'welcome_bonus', 'Welcome Bonus')}
                </p>
              )}

              <BonusBox item={operator} tracker={module?.type || 'main'} />
              {tncEnable && !tncFixed && <Tnc hasCollapse={false} operator={operator} />}
            </div>
          </div>

          <OperatorCta
            operator={operator}
            module={module.name}
            pageTemplate={pageTemplate}
            tracker={module?.tracking_link_name || 'main'}
            icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
            translationsObj={translationsObj}
          />
          {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
        </div>
        <IoMdClose
          className={`${styles.closeBtn || ''}`}
          onClick={clickHandler}
          fontSize={16}
          color="#ffffff"
          title="Close Icon"
        />
      </div>
    )
  );
}

TemplateOne.propTypes = {
  showWelcomeText: PropTypes.bool,
  showOnLoad: PropTypes.bool,
  operator: PropTypes.shape({
    standardised_logo_url: PropTypes.string,
    logo: PropTypes.string,
    logo_url: PropTypes.string,
    bonus: PropTypes.shape({
      rating: PropTypes.string,
    }),
    name: PropTypes.string,
    rating: PropTypes.string,
    url: PropTypes.string,
    extra_fields: PropTypes.shape({
      terms_and_conditions_text_enabled: PropTypes.string,
    }),
    status: PropTypes.string,
  }),
  tncFixed: PropTypes.bool,
  tncEnable: PropTypes.bool,
  stickyOffset: PropTypes.number,
  floating: PropTypes.bool,
  pageTemplate: PropTypes.string,
  module: PropTypes.shape({
    tracking_link_name: PropTypes.string,
    type: PropTypes.string,
    name: PropTypes.string,
  }),
};
