// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';
import LanguageSwitcher from 'components/languageSwitcher';
import { create as createPopup } from 'components/ui/popup/actions';
import { ContactLink } from 'components/contact';

import styles from './footerMenu.scss';
import messages from './footerMenu.intl.json';

type OwnProps = {|
  createContactPopup: () => void,
|};

type Props = {
  ...OwnProps,
  createLanguageSwitcherPopup: () => void,
};

class FooterMenu extends Component<Props> {
  static displayName = 'FooterMenu';

  render() {
    return (
      <div className={styles.footerMenu}>
        <Link to="/rules">
          <Message {...messages.rules} />
        </Link>
        {' | '}
        <ContactLink>
          <Message {...messages.contactUs} />
        </ContactLink>
        {' | '}
        <Link to="/dev">
          <Message {...messages.forDevelopers} />
        </Link>

        <div className={styles.langTriggerContainer}>
          <a
            href="#"
            className={styles.langTrigger}
            onClick={this.onLanguageSwitcher}
          >
            <span className={styles.langTriggerIcon} />
            <Message {...messages.siteLanguage} />
          </a>
        </div>
      </div>
    );
  }

  onLanguageSwitcher = (event: SyntheticMouseEvent<HTMLElement>) => {
    event.preventDefault();

    this.props.createLanguageSwitcherPopup();
  };
}

// mark this component, as not pure, because it is stateless,
// but should be re-rendered, if current lang was changed
export default connect<Props, OwnProps, _, _, _, _>(
  null,
  {
    createLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
  },
  null,
  { pure: false },
)(FooterMenu);