content: import $ from 'jquery';
  import React, { Component } from 'react';
  import { FormattedMessage } from 'react-intl';
  import Input from '../../components/SweetInput/SweetInput';
  import Button from '../../components/Button/Button';
  
  export default class SuggestFund extends Component {
    constructor() {
      super();
      this.state = {
        showForm: false,
        newPensionFundName: '',
        isSubmittingNewPensionFundName: false,
        newPensionFundNameError: false,
      };
    }
  
    postSuggestedFund(fund) {
      const url = '/api/pension_funds/suggest_fund';
  
      this.setState({ isSubmittingNewPensionFundName: true });
  
      $.post(url, {
        'email_target[name]': fund,
      })
        .done(() => {
          this.setState({
            showForm: false,
            isSubmittingNewPensionFundName: false,
            newPensionFundName: '',
            newPensionFundNameError: false,
          });
        })
        .fail(() => {
          console.log('err');
        });
    }
  
    toggle = () => {
      this.setState(state => ({
        ...state,
        showForm: !state.showForm,
      }));
    };
  
    onChange = newPensionFundName => {
      this.setState(state => ({
        ...state,
        newPensionFundName,
      }));
    };
  
    submit = e => {
      e.preventDefault();
      if (this.state.newPensionFundName.trim() === '') {
        this.setState({ newPensionFundNameError: true });
      } else {
        this.postSuggestedFund(this.state.newPensionFundName);
      }
    };
  
    render() {
      const errorMessage = this.state.newPensionFundNameError ? (
        <FormattedMessage
          id="email_tool.form.errors.suggest_fund"
          defaultMessage="Name of pension fund can't be blank"
        />
      ) : (
        ''
      );
  
      return (
        <div className="email-target-action">
          <div className="email__target-suggest-fund">
            <p>
              <a onClick={this.toggle}>
                <FormattedMessage
                  id="email_pension.form.other_pension_fund_text"
                  defaultMessage="Can't find your pension fund?"
                />
              </a>
            </p>
          </div>
          {this.state.showForm && (
            <div className="email-target_box">
              <h3>
                <span>
                  <FormattedMessage
                    id="email_tool.form.errors.fund_not_found"
                    defaultMessage="We're sorry you couldn't find your pension fund. Send us its
                  name and we'll update our records."
                  />
                </span>
              </h3>
              <div className="form__group">
                <Input
                  name="new_pension_fund"
                  label={
                    <FormattedMessage
                      id="email_tool.form.name_of_your_pension_fund"
                      defaultMessage="Name of your pension fund"
                    />
                  }
                  value={this.state.newPensionFundName}
                  onChange={this.onChange}
                  errorMessage={errorMessage}
                />
              </div>
  
              <div className="form__group">
                <Button
                  disabled={this.state.isSubmittingNewPensionFundName}
                  className="button action-form__submit-button"
                  onClick={this.submit}
                >
                  <FormattedMessage
                    id="email_tool.form.send_button_text"
                    defaultMessage="Send"
                  />
                </Button>
              </div>
            </div>
          )}
        </div>
      );
    }
  }
  