import React from 'react';
import PropTypes from 'prop-types';
import FooterList from './footer-list';
import FooterCookieNotice from './footer-cookie-notice';
import ShareLink from '../share-link/share-link';
import {
  getFooterData,
  urls as defaultUrls,
  urlsPropShape,
} from '../../constants';
import {
  SocialIconFacebook,
  SocialIconInstagram,
  SocialIconTwitter,
  SocialIconLinkedIn,
  SocialIconYoutube,
  SocialIconThreads,
  SocialIconTikTok,
  SocialIconRss,
} from '../assets/assets';
import 'reset-css/reset.css';
import '../color/color';
import '../grid/grid';
import '../media-queries/media-queries';
import '../rule/rule';
import '../typography/typography';
import cssGrid from '../grid/layout-grid.css';
import css from './footer.css';

const quote = (
  <p className={css['ds-footer__mission-statement']}>
    Published since September 1843 to take part in{' '}
    <em>
      “a severe contest between intelligence, which presses forward, and an
      unworthy, timid ignorance obstructing our progress.”
    </em>{' '}
  </p>
);

const Footer = ({ subscribeUrl, region, overrideUrls }) => {
  const urls = { ...defaultUrls, ...overrideUrls };
  const {
    customerLinks,
    socialLinks,
    theEconomistLinks,
    economistGroupLinks,
    minorLinks,
  } = getFooterData();
  const {
    FACEBOOK_LINK,
    INSTAGRAM_LINK,
    TWITTER_LINK,
    LINKEDIN_LINK,
    YOUTUBE_LINK,
    RSS_LINK,
    THREADS_LINK,
    TIKTOK_LINK,
  } = socialLinks;
  const currentYear = new Date().getFullYear();

  // The "subscribe" link needs to be configurable by consumers. This is because
  // the URL is used to identify the source of a referral and the relevant team
  // create new URLs for new pages.
  const subscribeLink = customerLinks.find(link => link.name === 'Subscribe');
  /* subscribeUrl is deprecated. See prop documentation */
  subscribeLink.url = subscribeUrl || urls.subscribe;

  return (
    <footer
      itemType='http://schema.org/WPFooter'
      className={css['ds-footer']}
      role='contentinfo'
    >
      <div
        className={`${cssGrid['ds-layout-grid']} ${
          css['ds-footer-cols-alpha']
        }`}
      >
        <div
          id='ds-footer-customer-links'
          className={css['ds-footer-cols-alpha__lead']}
        >
          <FooterList links={customerLinks} secondary major inverse />
        </div>
        <div className={css['ds-footer-cols-share']}>
          <h2 className={css['ds-footer__header']}>Keep updated</h2>
          <ul className={css['ds-footer__link-list']}>
            <li id='ds-footer-linkedin-icon'>
              <ShareLink
                href={LINKEDIN_LINK}
                inverse
                icon={<SocialIconLinkedIn />}
              />
            </li>
            <li id='ds-footer-facebook-icon'>
              <ShareLink
                href={FACEBOOK_LINK}
                inverse
                icon={<SocialIconFacebook />}
              />
            </li>
            <li id='ds-footer-x-icon'>
              <ShareLink
                href={TWITTER_LINK}
                inverse
                icon={<SocialIconTwitter />}
              />
            </li>
            <li id='ds-footer-instagram-icon'>
              <ShareLink
                href={INSTAGRAM_LINK}
                inverse
                icon={<SocialIconInstagram />}
              />
            </li>
            <li id='ds-footer-threads-icon'>
              <ShareLink
                href={THREADS_LINK}
                inverse
                icon={<SocialIconThreads />}
              />
            </li>
            <li id='ds-footer-tiktok-icon'>
              <ShareLink
                href={TIKTOK_LINK}
                inverse
                icon={<SocialIconTikTok />}
              />
            </li>
            <li id='ds-footer-youtube-icon'>
              <ShareLink
                href={YOUTUBE_LINK}
                inverse
                icon={<SocialIconYoutube />}
              />
            </li>
            <li id='ds-footer-rss-icon'>
              <ShareLink href={RSS_LINK} inverse icon={<SocialIconRss />} />
            </li>
          </ul>
        </div>
        {quote}
      </div>
      <nav
        className={`${cssGrid['ds-layout-grid']} ${
          css['ds-footer-cols-lambda']
        }`}
      >
        <div
          id='ds-footer-the-economist'
          className={css['ds-footer-cols-lambda__group']}
        >
          <h2 className={css['ds-footer__header']}>The Economist</h2>
          <FooterList links={theEconomistLinks} inverse secondary />
        </div>
        <div
          id='ds-footer-the-economist-group'
          className={css['ds-footer-cols-lambda__group']}
        >
          <h2 className={css['ds-footer__header']}>The Economist Group</h2>
          <FooterList links={economistGroupLinks} inverse secondary />
        </div>
      </nav>
      <FooterCookieNotice />
      <div className={css['ds-footer-cols-omega']}>
        <FooterList
          links={minorLinks}
          inverse
          secondary
          minor
          region={region}
        />
        <p id='ds-footer-copyright' className={css['ds-footer__copyright']}>
          Copyright &copy; The Economist Newspaper Limited {currentYear}. All
          rights reserved.
        </p>
      </div>
    </footer>
  );
};

Footer.defaultProps = {
  overrideUrls: {},
  subscribeUrl: null,
  region: '',
};

Footer.propTypes = {
  /** any url that needs to be overriden in the default urls */
  overrideUrls: urlsPropShape,
  /**
   * deprecated: subscribeUrl should be passed in through the overrideUrls prop as overrideUrls.subscribe
   */
  subscribeUrl: PropTypes.string,
  region: PropTypes.string,
};

export default Footer;
