/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
import { copyrightText } from 'gatsby-core-theme/src/helpers/getters';
import Disclaimer from 'gatsby-core-theme/src/components/atoms/disclaimer';
import FooterHotline from '../../../../atoms/footer/hotline';
import FooterLicense from '../../../../atoms/footer/license';
import styles from './template-three.module.scss';

const TemplateThree = ({
  footerLogos,
  footerMenu,
  footerMenuLimit = 3,
  copyrightDisclaimer,
  showLinks,
  asSeenOn,
  gamblingText,
  socialIcons,
  hasFooterLinks,
  hasDisclaimer,
  showCopyright,
  helpText,
  phoneNum,
  logo,
  dmcaImage,
  dmcaWidth,
  dmcaHeight,
  securityIcon,
}) => {
  const AsSeenOn = asSeenOn ? loadable(() => import('../../../../atoms/footer/as-seen-on')) : null;

  if (footerMenu !== null && footerMenu.children.length) {
    footerMenu.children.splice(footerMenuLimit);
  }

  return (
    <footer>
      {AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template="templateThree" />}
      <div
        className={`${styles?.footer || ''} ${styles?.templateThree || ''}
            ${hasFooterLinks && styles[hasFooterLinks] ? styles.hasFooterLinks || '' : ''}`}
      >
        {footerMenu && showLinks && (
          <div className={styles?.topPart || ''}>
            {footerMenu && showLinks && (
              <div className={styles?.links || ''}>
                <LinkList lists={footerMenu} gtmClass="mobile-menu-gtm" />
              </div>
            )}

            <FooterLicense
              gamblingText={gamblingText}
              socialIcons={socialIcons}
              template="templateThree"
              logo={logo}
              securityIcon={securityIcon}
            />
          </div>
        )}

        {(helpText || phoneNum) && (
          <FooterHotline
            showAsSeen={false}
            helpText={helpText}
            phoneNum={phoneNum}
            template="templateThree"
          />
        )}

        <div className={styles?.bottomPart || ''}>
          {copyrightDisclaimer && (
            <div
              className={styles?.copyrightDisclaimer || ''}
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
            />
          )}
          {showCopyright && <p className={styles.copyrightText}>{copyrightText()}</p>}

          {(footerLogos || hasDisclaimer) && (
            <div className={styles?.logos || ''}>
              {footerLogos && (
                <LinkList
                  showListTitle={false}
                  imageOnly
                  singleList
                  lists={footerLogos}
                  gtmClass="mobile-menu-gtm logo-cta"
                  width={130}
                  height={140}
                />
              )}
              {hasDisclaimer && (
                <Disclaimer
                  loading="lazy"
                  dmcaImage={dmcaImage}
                  imgWidth={dmcaWidth}
                  imgHeight={dmcaHeight}
                />
              )}
            </div>
          )}
        </div>
      </div>
    </footer>
  );
};

export default TemplateThree;

TemplateThree.propTypes = {
  footerLogos: PropTypes.shape({}),
  footerMenu: PropTypes.shape({
    children: PropTypes.shape([]),
  }),
  copyrightDisclaimer: PropTypes.string,
  showLinks: PropTypes.bool,
  asSeenOn: PropTypes.shape({}),
  gamblingText: PropTypes.string,
  socialIcons: PropTypes.shape({}),
  hasFooterLinks: PropTypes.bool,
  hasDisclaimer: PropTypes.bool,
  showCopyright: PropTypes.bool,
  helpText: PropTypes.string,
  phoneNum: PropTypes.string,
  logo: PropTypes.string,
  dmcaImage: PropTypes.string,
  dmcaWidth: PropTypes.number,
  dmcaHeight: PropTypes.number,
  securityIcon: PropTypes.string,
  footerMenuLimit: PropTypes.number,
};
