import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { messages as 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, intl) => {
  const locale = intl ? intl.locale : 'en';

  const contactLinkByLocale =
    locale === 'de'
      ? 'https://go.doodle.com/WF-2021-01-Contact-Sales-DE_LP-02.html'
      : 'https://landing.doodle.com/contact-sales';

  return [
    {
      label: commonMessages.aboutUs,
      to: `/${locale}/about-us`,
    },
    {
      label: commonMessages.team,
      to: `/${locale}/team`,
    },
    {
      label: commonMessages.career,
      to: 'https://doodle.teamtailor.com/',
    },
    {
      label: commonMessages.press,
      to: `/${locale}/press`,
    },
    {
      label: commonMessages.adsOnDoodle,
      to: commonMessages.urlAdsOnDoodle,
    },
    {
      label: commonMessages.txVentures,
      to: 'https://ventures.tx.group/',
    },
    {
      label: commonMessages.help,
      to: 'https://help.doodle.com/',
      'data-track': JSON.stringify({
        event: 'Click Help',
        type: 'user Interaction',
        properties: { label: page, category: 'Global Footer' },
      }),
    },
    {
      label: commonMessages.contactSales,
      to: contactLinkByLocale,
      'data-track': JSON.stringify({
        event: 'Click Contact Sales',
        type: 'user Interaction',
        properties: {
          label: page,
          description: "user clicks on the 'Contact Sales' link placed in the footer",
          category: 'Global Footer',
          'Contact Sales': '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, intl);
    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;