text: import React from 'react';
  import PropTypes from 'prop-types';
  import withIntl from '../lib/withIntl';
  import { graphql } from 'react-apollo'
  import { FormattedMessage, defineMessages } from 'react-intl';
  import gql from 'graphql-tag'
  import InputField from './InputField';
  import SmallButton from './SmallButton';
  import { cloneDeep, pick } from 'lodash';
  import { Form, Row, Col } from 'react-bootstrap';
  
  class EditTwitterAccount extends React.Component {
  
    static propTypes = {
      connectedAccount: PropTypes.object.isRequired
    }
  
    constructor(props) {
      super(props);
      this.onClick = this.onClick.bind(this);
      this.renderNotification = this.renderNotification.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.messages = defineMessages({
        'newBacker.toggle.label': { id: 'connectedAccounts.twitter.newBacker.toggle.label', defaultMessage: 'New backers' },
        'newBacker.toggle.description': { id: 'connectedAccounts.twitter.newBacker.toggle.description', defaultMessage: 'Whenever you have a new backer that has provided a twitter username, a tweet will be sent from your connected account' },
        'newBacker.tweet': { id: 'connectedAccounts.twitter.newBacker.tweet', defaultMessage: '{backerTwitterHandle} thank you for your {amount} donation 🙏 - your contribution makes a difference!' },
        'monthlyStats.toggle.label': { id: 'connectedAccounts.twitter.monthlyStats.toggle.label', defaultMessage: 'Monthly stats' },
        'monthlyStats.toggle.description': { id: 'connectedAccounts.twitter.monthlyStats.toggle.description', defaultMessage: 'Every first of the month, automatically send a public tweet with the latest stats, the new backers and the all time top backers' },
        'updatePublished.toggle.label': { id: 'connectedAccounts.twitter.updatePublished.toggle.label', defaultMessage: 'Update published' },
        'updatePublished.toggle.description': { id: 'connectedAccounts.twitter.updatePublished.toggle.description', defaultMessage: 'Send a tweet whenever you publish an update' },
        'tenBackers.toggle.label': { id: 'connectedAccounts.twitter.tenBackers.toggle.label', defaultMessage: '10 backers' },
        'tenBackers.toggle.description': { id: 'connectedAccounts.twitter.tenBackers.toggle.description', defaultMessage: 'Whenever one of the collectives that you are hosting reaches 10 backers' },
        'tenBackers.tweet': { id: 'connectedAccounts.twitter.tenBackers.tweet', defaultMessage: '🎉 {collective} just reached 10 backers! Thank you {topBackersTwitterHandles} 🙌  Support them too!' },
        'oneHundredBackers.toggle.label': { id: 'connectedAccounts.twitter.oneHundredBackers.toggle.label', defaultMessage: '100 backers' },
        'oneHundredBackers.toggle.description': { id: 'connectedAccounts.twitter.oneHundredBackers.toggle.description', defaultMessage: 'Whenever one of the collectives that you are hosting reaches 100 backers' },
        'oneHundredBackers.tweet': { id: 'connectedAccounts.twitter.oneHundredBackers.tweet', defaultMessage: '🎉 {collective} just reached 100 backers!! 🙌  Support them too!' },
        'oneThousandBackers.toggle.label': { id: 'connectedAccounts.twitter.oneThousandBackers.toggle.label', defaultMessage: '1,000 backers' },
        'oneThousandBackers.toggle.description': { id: 'connectedAccounts.twitter.oneThousandBackers.toggle.description', defaultMessage: 'Whenever one of the collectives that you are hosting reaches 1,000 backers' },
        'oneThousandBackers.tweet': { id: 'connectedAccounts.twitter.oneThousandBackers.tweet', defaultMessage: '🎉 {collective} just reached 1,000 backers!! 🙌  Support them too!' },
      });
  
      this.notificationTypes = [];
      if (props.collective.type === 'COLLECTIVE') {
        this.notificationTypes = ['newBacker', 'monthlyStats', 'updatePublished'];
      }
  
      if (props.collective.isHost) {
        this.notificationTypes = ['tenBackers', 'oneHundredBackers', 'oneThousandBackers'];
      }
  
      this.state = { connectedAccount: cloneDeep(props.connectedAccount) };
      this.state.connectedAccount.settings = this.state.connectedAccount.settings || {};
      this.notificationTypes.forEach(notificationType => {
        this.state.connectedAccount.settings[notificationType] = this.state.connectedAccount.settings[notificationType] || { active: false };
        if (this.messages[`${notificationType}.tweet`]) {
          this.state.connectedAccount.settings[notificationType].tweet = this.state.connectedAccount.settings[notificationType].tweet || props.intl.formatMessage(this.messages[`${notificationType}.tweet`]);
        }
      })
    }
  
    async onClick() {
      const connectedAccount = pick(this.state.connectedAccount, ['id', 'settings']);
      await this.props.editConnectedAccount(connectedAccount);
      this.setState({ isModified: false });
    }
  
    handleChange(notification, attr, val) {
      const { connectedAccount } = this.state;
      connectedAccount.settings[notification][attr] = val;
      this.setState({ connectedAccount, isModified: true });
    }
  
    renderNotification(notificationType) {
      const { intl } = this.props;
      const { connectedAccount } = this.state;
  
      return (
        <div className="notificationSettings" key={notificationType}>
          <style jsx>{`
          .notificationSettings :global(label) {
            margin-top: 0.7rem;
          }
          .notificationSettings :global(.form-group) {
            margin-bottom: 0rem;
          }
          .notificationSettings :global(.inputField textarea) {
            height: 14rem;
          }
          `}</style>
          <Row>
            <Col sm={12}>
              <InputField
                type="switch"
                name={`${notificationType}.active`}
                className="horizontal"
                defaultValue={connectedAccount.settings[notificationType].active}
                label={intl.formatMessage(this.messages[`${notificationType}.toggle.label`])}
                description={this.messages[`${notificationType}.toggle.description`] && intl.formatMessage(this.messages[`${notificationType}.toggle.description`])}
                onChange={(activateNewBacker) => this.handleChange(notificationType, "active", activateNewBacker)}
                />
              { this.messages[`${notificationType}.tweet`] &&
                <InputField
                  type="textarea"
                  className="horizontal"
                  maxLength={280}
                  charCount={true}
                  name={`${notificationType}.tweet`}
                  defaultValue={connectedAccount.settings[notificationType].tweet || intl.formatMessage(this.messages[`${notificationType}.tweet`])}
                  onChange={(tweet) => this.handleChange(notificationType, "tweet", tweet)}
                  />
              }
            </Col>
          </Row>
        </div>
      );
    }
  
    render() {
      return (
        <div className="EditTwitterAccount">
          <Form horizontal>
            <details>
              <summary><FormattedMessage id="connectedAccounts.twitter.settings" defaultMessage="Settings" /></summary>
              { this.notificationTypes.map(this.renderNotification) }
            </details>
            <Row>
              <Col sm={3}></Col>
              <Col sm={9}>
                { this.state.isModified &&
                  <SmallButton className="default" bsStyle="primary" onClick={this.onClick}>
                    <FormattedMessage id="connectedAccount.save.btn" defaultMessage="save" />
                  </SmallButton>
                }
              </Col>
            </Row>
          </Form>
        </div>
      );
    }
  
  }
  
  const editConnectedAccountQuery = gql`
  mutation editConnectedAccount($connectedAccount: ConnectedAccountInputType!) {
    editConnectedAccount(connectedAccount: $connectedAccount) {
      id
      settings
    }
  }
  `;
  
  const addMutation = graphql(editConnectedAccountQuery, {
    props: ( { mutate }) => ({
      editConnectedAccount: async (connectedAccount) => {
        return await mutate({ variables: { connectedAccount } })
      }
    })
  });
  
  export default addMutation(withIntl(EditTwitterAccount));
  