import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import commonMessages from '@doodle/common-messages';

import FooterNav from './FooterNav';
import SocialIcons from './SocialIcons';
import Section from '../Section';

const defaultPrimaryLinks = [
  {
    label: commonMessages.team,
    to: '/about-doodle/team',
  },
  {
    label: commonMessages.career,
    to: 'https://doodle.teamtailor.com/',
  },
  {
    label: commonMessages.blog,
    to: 'https://blog.doodle.com/',
  },
  {
    label: commonMessages.press,
    to: '/press',
  },
  {
    label: commonMessages.adsOnDoodle,
    to: '/advertising',
  },
  {
    label: commonMessages.help,
    to: 'https://help.doodle.com/',
  },
  {
    label: commonMessages.contactSales,
    to: 'https://landing.doodle.com/demo',
  },
];

const defaultSecondaryLinks = [
  {
    label: commonMessages.termsOfService,
    to: '/terms-of-service',
  },
  {
    label: commonMessages.imprint,
    to: '/imprint',
  },
  {
    label: commonMessages.privacy,
    to: '/privacy-policy',
  },
];

function translateLinks(links, intl) {
  // intl needs to be supplied by the consuming project, but can be null when
  // e.g. rendering the style guide, so let's handle that gracefully.
  return links.map(link => ({
    label: intl ? intl.formatMessage(link.label) : link.label.defaultMessage,
    to: link.to,
  }));
}

class Footer extends Component {
  static propTypes = {
    className: PropTypes.string,
    /** Can be either an array of props objects `{ to: 'url', ... }` for a Link or already created <Link> elements. */
    primaryLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.element])),
    /** Can be either an array of props objects `{ to: 'url', ... }` for a Link or already created <Link> elements. */
    secondaryLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.element])),
    languageMenu: PropTypes.element,
    variant: PropTypes.oneOf(['light', 'dark']),
    intl: PropTypes.object,
  };

  static defaultProps = {
    className: null,
    primaryLinks: null,
    secondaryLinks: null,
    languageMenu: null,
    variant: 'light',
    intl: null,
  };

  render() {
    const { className, primaryLinks, secondaryLinks, languageMenu, variant, intl } = this.props;
    const componentClassName = classnames(
      'Footer',
      {
        [`Footer--${variant}`]: variant,
      },
      className
    );

    const primary = primaryLinks || translateLinks(defaultPrimaryLinks, intl);
    const secondary = secondaryLinks || translateLinks(defaultSecondaryLinks, intl);

    const footerNarrow = (
      <footer className={classnames(componentClassName, 'Footer--narrow')}>
        <Section theme="transparent">
          <div className="Footer-column">
            <hr className="Footer-hr" />
            <FooterNav links={primary} variant="primary" />
            <section className={classnames('Footer-languageSocial', { 'Footer-languageSocial-center': !languageMenu })}>
              <SocialIcons />
              {languageMenu && <div className="Footer-languageMenuWrapper">{languageMenu}</div>}
            </section>
            <FooterNav links={secondary} variant="secondary" />
          </div>
        </Section>
      </footer>
    );

    const footerWide = (
      <footer className={classnames(componentClassName, 'Footer--wide')}>
        <Section theme="transparent">
          <div className="Footer-column">
            <hr className="Footer-hr" />
            <div className="Footer-row">
              <section className="Footer-column">
                <FooterNav links={primary} variant="primary" />
                <FooterNav links={secondary} variant="secondary" />
              </section>
              <section className="Footer-languageSocial">
                {languageMenu && <div className="Footer-languageMenuWrapper">{languageMenu}</div>}
                <SocialIcons />
              </section>
            </div>
          </div>
        </Section>
      </footer>
    );

    return (
      <React.Fragment>
        {footerNarrow}
        {footerWide}
      </React.Fragment>
    );
  }
}

export default Footer;