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';
import { translateMenuItems } from '../../utils/translate';

export const getDefaultPrimaryLinks = page => [
  {
    label: commonMessages.aboutUs,
    to: '/en/about-us',
  },
  {
    label: commonMessages.team,
    to: commonMessages.urlTeam,
  },
  {
    label: commonMessages.career,
    to: 'https://doodle.teamtailor.com/',
  },
  {
    label: commonMessages.press,
    to: commonMessages.urlMediaCorner,
  },
  {
    label: commonMessages.adsOnDoodle,
    to: commonMessages.urlAdsOnDoodle,
  },
  {
    label: commonMessages.help,
    to: commonMessages.urlHelp,
    'data-tracking': 'true',
    'data-ga-action': 'clickHelp',
    'data-ga-category': 'userInteraction',
    'data-ga-label': page,
  },
  {
    label: commonMessages.contactSales,
    to: 'https://landing.doodle.com/contact-sales',
    'data-tracking': 'true',
    'data-ga-action': 'contactSales',
    'data-ga-category': 'userInteraction',
    'data-ga-label': `${page} footer`,
    'data-amplitude-type': 'user Interaction',
    'data-amplitude-name': 'Click Contact Sales',
    'data-amplitude-properties': JSON.stringify({
      'Contact Sales': 'Footer',
      'Event description': 'user clicks on the "Contact Sales” link placed in the header or in the footer',
    }),
  },
];

export const defaultSecondaryLinks = [
  {
    label: commonMessages.termsOfService,
    to: commonMessages.urlTermsAndConditions,
  },
  {
    label: commonMessages.imprint,
    to: commonMessages.urlImprint,
  },
  {
    label: commonMessages.privacyPolicy,
    to: commonMessages.urlPrivacy,
  },
];

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']),
    page: PropTypes.string.isRequired, // used for tracking
    intl: PropTypes.object,
  };

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

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

    let primary = primaryLinks || getDefaultPrimaryLinks(page);
    primary = translateMenuItems(primary, intl);
    let secondary = secondaryLinks || defaultSecondaryLinks;
    secondary = translateMenuItems(secondary, 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;