/* eslint-disable import/no-extraneous-dependencies */
import React, { lazy, Suspense } from 'react';
// import loadable from '@loadable/component';
import { getExtraField } from 'gatsby-core-theme/src/helpers/getters';
import { generatePlaceholderString } from 'gatsby-core-theme/src/helpers/generators.mjs';

export const footerContent = (props) => {
  let ModuleComponent = null;

  switch (props.footerTemplate) {
    case 'template_one':
      ModuleComponent = lazy(() => import('./variants/template-one'));
      return <ModuleComponent {...props} />;
    case 'template_two':
      ModuleComponent = lazy(() => import('./variants/template-two'));
      return <ModuleComponent {...props} />;
    case 'template_three':
      ModuleComponent = lazy(() => import('./variants/template-three'));
      return <ModuleComponent {...props} />;
    default:
      ModuleComponent = lazy(() => import('./variants/template-one'));
      return <ModuleComponent {...props} />;
  }
};

const Footer = (props) => {
  const helpText = `
  <p>
    Gambling can be addictive, please play responsibly.
    <br />
    If you are a problem gambler, please visit this
    <a
      href="https://www.begambleaware.org/"
      target="_blank"
      rel="nofollow"
      class="footer-gtm"
    >
      website
    </a>
    in order to get help.
  </p>`;

  const footerLogos = getExtraField(props.section?.extra_fields, 'logos');

  const getFooterLogos = () => {
    let refactoredFooterLogos = { children: [] };

    if (footerLogos === null) {
      refactoredFooterLogos = {
        children: [...props.page?.page?.responsibleGaming],
      };
    } else {
      refactoredFooterLogos = {
        ...footerLogos,
        children: [...props.page?.page?.responsibleGaming, ...footerLogos.children],
      };
    }

    return refactoredFooterLogos;
  };

  const helpline = () => {
    if (getExtraField(props.section?.extra_fields, 'helpline')) {
      return generatePlaceholderString(getExtraField(props.section?.extra_fields, 'helpline'));
    }
    return null;
  };

  const customCopyrightText = () => {
    if (getExtraField(props.section?.extra_fields, 'copyright_text')) {
      return generatePlaceholderString(
        getExtraField(props.section?.extra_fields, 'copyright_text')
      );
    }
    return null;
  };

  props = {
    ...props,
    showLinks: props.template !== 'ppc',
    copyrightDisclaimer: getExtraField(props.section?.extra_fields, 'copyright_disclaimer'),
    footerLogos: props.page?.page?.responsibleGaming?.length ? getFooterLogos() : footerLogos,
    hasDisclaimer: true,
    showCopyright: true,
    footerMenu: getExtraField(props.section?.extra_fields, 'links'),
    asSeenOn: getExtraField(props.section?.extra_fields, 'as_seen_on'),
    gamblingText: getExtraField(props.section?.extra_fields, 'gambling_text'),
    socialIcons: getExtraField(props.section?.extra_fields, 'social_icons'),
    logo: '../../../images/logo.svg',
    dmcaImage: '../../../images/dmca.png',
    dmcaWidth: 100,
    dmcaHeight: 30,
    securityIcon: '../../../images/security.svg',
    helpText,
    phoneNum: helpline(),
    copyrightCustomText: customCopyrightText(),
  };

  return <Suspense fallback={<></>}>{footerContent(props)}</Suspense>;
};

export default Footer;
