import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import { getExtraField, copyrightText } from '~helpers/getters';
import Disclaimer from '~atoms/disclaimer';
import styles from './footer.module.scss';

/* eslint-disable react/no-danger */

const Footer = ({
  section,
  footerMenu,
  footerLogos,
  footerTopCustom,
  footerBottomCustom,
  copyrightDisclaimer,
  template,
  hasDisclaimer = true,
  dmcaImage = '../../../../../images/dmca.png',
}) => {
  const TopSection = footerTopCustom;
  const BottomSection = footerBottomCustom;
  const showLinks = template !== 'ppc';

  const LinkList = footerMenu && showLinks ? loadable(() => import('~molecules/link-list')) : null;

  return (
    <footer className={styles.footer || ''}>
      <div className={styles.topPart || ''}>
        <div className={styles.links || ''}>
          {footerMenu && showLinks && (
            <LinkList
              lists={getExtraField(section.extra_fields, footerMenu)}
              gtmClass="mobile-menu-gtm"
            />
          )}
        </div>

        {footerTopCustom && <TopSection section={section} />}
      </div>
      {hasDisclaimer && <Disclaimer dmcaImage={dmcaImage} />}
      <div className={styles.bottomPart || ''}>
        {footerBottomCustom && <BottomSection section={section} />}
        <div className={styles.copyrightDisclaimer || ''}>
          {copyrightDisclaimer && getExtraField(section.extra_fields, copyrightDisclaimer) && (
            <p
              dangerouslySetInnerHTML={{
                __html: getExtraField(section.extra_fields, copyrightDisclaimer).replace(
                  /\. /g,
                  '.<br />'
                ),
              }}
            />
          )}
          <p>{copyrightText()}</p>
        </div>
        <div className={styles.logos || ''}>
          {footerLogos && (
            <LinkList
              showListTitle={false}
              imageOnly
              singleList
              lists={getExtraField(section.extra_fields, footerLogos)}
              gtmClass="mobile-menu-gtm logo-cta"
            />
          )}
        </div>
      </div>
    </footer>
  );
};

export default Footer;

Footer.propTypes = {
  section: PropTypes.shape({
    extra_fields: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    modules: PropTypes.arrayOf(
      PropTypes.shape({
        short_code: PropTypes.string,
        value: PropTypes.string,
        title: PropTypes.string,
      })
    ),
  }),
  footerLogos: PropTypes.string,
  footerMenu: PropTypes.string,
  copyrightDisclaimer: PropTypes.string,
  footerTopCustom: PropTypes.func,
  footerBottomCustom: PropTypes.func,
  template: PropTypes.string,
  hasDisclaimer: PropTypes.string,
  dmcaImage: PropTypes.string,
};
