import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Icon from '../../../visuals/Icon/Icon';
import IconActivateSuggestions from '../../../visuals/Icon/svg/d_activateSuggestions.svg';

import { Button, ButtonLabel } from '../../Button';

class ActivateSuggestions extends Component {
  static propTypes = {
    closeMenu: PropTypes.func.isRequired,
    activateSuggestions: PropTypes.shape({
      headline: PropTypes.string,
      text: PropTypes.string,
      buttonText: PropTypes.string,
      buttonLink: PropTypes.string,
      silentButtonText: PropTypes.string,
      onSilentButtonClick: PropTypes.func,
    }).isRequired,
  };

  onSilentButtonClick = () => {
    if (this.props.activateSuggestions.onSilentButtonClick) this.props.activateSuggestions.onSilentButtonClick();
    this.props.closeMenu();
  };

  render() {
    const { activateSuggestions } = this.props;
    return (
      <div className="ActivateSuggestions">
        <Icon icon={IconActivateSuggestions} />
        <h2 className="u-titleS ActivateSuggestions-headline">{activateSuggestions.headline}</h2>
        <p className="ActivateSuggestions-text">{activateSuggestions.text}</p>
        <Button href={activateSuggestions.buttonLink} variant="whiteWithBorder" type="button">
          <ButtonLabel>{activateSuggestions.buttonText}</ButtonLabel>
        </Button>
        {/** We can't use <Button /> here because its mousedown event listener, which  manually sets focus on click,
         * triggers the MultiEmailSelect menu to close before the click callback is called */}
        <button className="Button Button--linkBlue" onClick={this.onSilentButtonClick}>
          <ButtonLabel>{activateSuggestions.silentButtonText}</ButtonLabel>
        </button>
      </div>
    );
  }
}

export default ActivateSuggestions;