import * as React from 'react'
import InlineSVG from 'svg-inline-react'

import { IConnectBccProps, IConnectBccState } from '../interfaces'

const logo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/drift-logo-circle-white.svg')

import './styles.styl'

export default class ConnectBcc extends React.Component<IConnectBccProps, IConnectBccState> {
  constructor(props: IConnectBccProps) {
    super(props)
    this.state = {
      bccEmailAddress: '',
    }
  }

  handleBccEmailAddressChange = (event: any) => {
    this.setState({ bccEmailAddress: event.target.value })
  }

  render() {
    const { onSubmit, actions } = this.props
    const { bccEmailAddress } = this.state
    return (
      <div className="drift-onboarding-take-for-spin">
        <InlineSVG className="drift-popup-logo" src={logo} />
        <h3 className="drift-popup-header">Add a Bcc</h3>
        <p className="drift-outbound-p-tag">
          Automatically log email activity in your CRM when you send a tracked email or sequence.
        </p>
        <input className="drift-outbound-input" onChange={this.handleBccEmailAddressChange}/>
        <button type="submit" className="drift-outbound-button button-primary"
          onClick={() => {
            actions.updateSetting({ bccEmailAddress })
            onSubmit()
          }}
        >
          Connect
        </button>
        <a className="login-account-info-text drift-outbound-login-page-link"
          onClick={() => {
            window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
          }}>Not right now</a>
      </div>
    )
  }
}