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

import Login from '../popup/Login'
import Success from './Success'
import ConnectGmail from './ConnectGmail'
import ConnectBcc from './ConnectBcc'

import { IOnboardingProps, IOnboardingState } from './interfaces'
const close = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../img/svg/close.svg')

export default class SequenceOnboardingPage extends React.Component<IOnboardingProps, IOnboardingState> {
  constructor(props: IOnboardingProps) {
    super(props)
    this.state = {
      connectedGmail: false,
      connectedBcc: false,
    }
  }

  render() {
    const { authStatus } = this.props
    const { connectedGmail, connectedBcc } = this.state
    return (
      <div>
        <div onClick={() => {
          window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
        }}>
          <InlineSVG className="onboarding-close" src={close} />
        </div>
        <div className="onboarding">
          {authStatus
            ? connectedGmail
              ? connectedBcc
                ? <Success/>
                : <ConnectBcc onSubmit={() => this.setState({ connectedBcc: true })}/>
              : <ConnectGmail onSubmit={() => this.setState({ connectedGmail: true })}/>
            : <Login />}
        </div>
      </div>
    )
  }
}