/* eslint-disable react/prop-types */
/* eslint-disable react/forbid-prop-types */
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Button from '~atoms/button/button';
import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
import styles from './tracker.module.scss';
import { getTrackerName } from '~helpers/tracker';
import HeadData from '~organisms/head';

const Tracker = ({
  pageContext,
  path,
  mainText = 'One sec, while we load [operator_name] for you..',
  redirectText = 'If the casino has not loaded within a few seconds',
  btnText = 'Click Here!',
  bgImage = '',
  bgVideo = '',
  redirectTimer = 5000,
  logo = '../../../../../images/logo.svg',
  counter = false,
  isStory = false,
  operatorLogo = false,
  operatorLogoWidth = '80',
  operatorLogoHeight = '80',
}) => {
  const { operator, page } = pageContext;
  const translations = page?.translations;

  const tracker = getTrackerName(operator, page, path);

  const showSplashScreen = typeof window !== 'undefined';

  function redirect() {
    if (typeof window !== 'undefined' && !isStory) {
      window.location.replace(tracker.value);
    }
  }

  function manualRedirect(e) {
    if (!isStory) {
      e.preventDefault();
      redirect();
    }
  }

  /* eslint consistent-return: 0 */
  useEffect(() => {
    window.loadGTM = false;
    if (!isStory) {
      const timer = setTimeout(() => redirect(), redirectTimer);

      return () => {
        clearTimeout(timer);
      };
    }
  });

  let background = <></>;
  if (bgVideo) {
    background = (
      <video muted autoPlay loop className={styles.background} poster={bgImage && bgImage}>
        <source src={bgVideo} type="video/webm" />
      </video>
    );
  } else if (bgImage) {
    background = <LazyImage className={styles.background} src={bgImage} alt="background image" />;
  }

  const imageObject = operator?.standardised_logo_url_object || operator?.logo_url_object;

  return (
    <>
      {showSplashScreen && (
        <>
          <div className={styles.container || ''}>
            {background}
            <div className={styles.content || ''}>
              <LazyImage alt="Site logo" src={logo} />
              <p
                className={`${styles.mainText || ''} ${
                  operatorLogo && (styles.mainTextWithlogo || '')
                }`}
              >{`${translate(translations, 'splash_screen_main_text', mainText).replace(
                '[operator_name]',
                operator?.bonus?.operator_name || operator.name
              )}`}</p>
              {operatorLogo && (
                <LazyImage
                  src={imagePrettyUrl(
                    imageObject?.filename || operator?.logo_url,
                    operatorLogoWidth,
                    operatorLogoHeight
                  )}
                  alt={getAltText(imageObject, operator.name)}
                  loading="eager"
                  width={operatorLogoWidth}
                  height={operatorLogoHeight}
                  className={styles.operatorlogo || ''}
                />
              )}
              <div className={styles.bar || ''} />
              {counter ? (
                redirectText
              ) : (
                <div
                  className={styles.redirectText || ''}
                  // eslint-disable-next-line react/no-danger
                  dangerouslySetInnerHTML={{
                    __html: translate(translations, 'splash_screen_redirect_text', redirectText),
                  }}
                />
              )}
              <Button
                onClick={(e) => manualRedirect(e)}
                btnText={translate(translations, 'splash_screen_button', btnText)}
                targetBlank={false}
                isInternalLink={false}
                gtmClass="tracker-gtm btn-cta"
              />
            </div>
          </div>
        </>
      )}
    </>
  );
};

export const Head = ({ pageContext }) => (
  <HeadData page={pageContext.page} siteInfo={pageContext.siteInfo} />
);

Tracker.propTypes = {
  redirectText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  mainText: PropTypes.string,
  btnText: PropTypes.string,
  bgImage: PropTypes.string,
  bgVideo: PropTypes.string,
  logo: PropTypes.string,
  counter: PropTypes.bool,
  redirectTimer: PropTypes.number,
  isStory: PropTypes.bool,
  operatorLogo: PropTypes.bool,
  operatorLogoWidth: PropTypes.string,
  operatorLogoHeight: PropTypes.string,
  pageContext: PropTypes.shape({
    operator: PropTypes.shape({
      bonus: PropTypes.shape({
        operator_name: PropTypes.string,
      }),
      name: PropTypes.string,
      standardised_logo_url_object: PropTypes.shape({}),
      logo_url_object: PropTypes.shape({}),
      logo_url: PropTypes.string,
      links: PropTypes.shape({
        main: PropTypes.string,
        terms_and_conditions: PropTypes.string,
      }),
    }).isRequired,
    page: PropTypes.shape({
      template: PropTypes.string,
      translations: PropTypes.shape({}),
    }),
  }),
  styles: PropTypes.shape({}),
};

export default Tracker;
