import * as React from 'react'
import Login from '../popup/Login'
import TakeForSpin from './TakeForSpin'
import SuperDope from './SuperDope'
import InlineSVG from 'svg-inline-react'

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

const OnboardingPage = ({ authStatus, testEmailSent }: IOnboardComponentProps): JSX.Element => {
  return (
    <div>
      <div onClick={() => window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')}>
        <InlineSVG className="onboarding-close" src={close} />
      </div>
      <div className="onboarding">
        {authStatus
          ? testEmailSent
            ? <SuperDope />
            : <TakeForSpin />
          : <Login />}
      </div>
    </div>
  )
}
export default OnboardingPage