text: import React, { PureComponent } from 'react'
  import PropTypes from 'prop-types'
  import { Switch, Route } from 'react-router-dom'
  import FirstTimeFlowSwitch from './first-time-flow-switch'
  import Welcome from './welcome'
  import SelectAction from './select-action'
  import EndOfFlow from './end-of-flow'
  import Unlock from '../unlock-page'
  import CreatePassword from './create-password'
  import SeedPhrase from './seed-phrase'
  import MetaMetricsOptInScreen from './metametrics-opt-in'
  import {
    DEFAULT_ROUTE,
    INITIALIZE_WELCOME_ROUTE,
    INITIALIZE_CREATE_PASSWORD_ROUTE,
    INITIALIZE_SEED_PHRASE_ROUTE,
    INITIALIZE_UNLOCK_ROUTE,
    INITIALIZE_SELECT_ACTION_ROUTE,
    INITIALIZE_END_OF_FLOW_ROUTE,
    INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
    INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
  } from '../../helpers/constants/routes'
  
  export default class FirstTimeFlow extends PureComponent {
    static propTypes = {
      completedOnboarding: PropTypes.bool,
      createNewAccount: PropTypes.func,
      createNewAccountFromSeed: PropTypes.func,
      history: PropTypes.object,
      isInitialized: PropTypes.bool,
      isUnlocked: PropTypes.bool,
      unlockAccount: PropTypes.func,
      nextRoute: PropTypes.string,
      showingSeedPhraseBackupAfterOnboarding: PropTypes.bool,
      seedPhraseBackedUp: PropTypes.bool,
      verifySeedPhrase: PropTypes.func,
    }
  
    state = {
      seedPhrase: '',
      isImportedKeyring: false,
    }
  
    componentDidMount () {
      const {
        completedOnboarding,
        history,
        isInitialized,
        isUnlocked,
        showingSeedPhraseBackupAfterOnboarding,
        seedPhraseBackedUp,
      } = this.props
  
      if (completedOnboarding && (!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)) {
        history.push(DEFAULT_ROUTE)
        return
      }
  
      if (isInitialized && !isUnlocked) {
        history.push(INITIALIZE_UNLOCK_ROUTE)
        return
      }
    }
  
    handleCreateNewAccount = async (password) => {
      const { createNewAccount } = this.props
  
      try {
        const seedPhrase = await createNewAccount(password)
        this.setState({ seedPhrase })
      } catch (error) {
        throw new Error(error.message)
      }
    }
  
    handleImportWithSeedPhrase = async (password, seedPhrase) => {
      const { createNewAccountFromSeed } = this.props
  
      try {
        const vault = await createNewAccountFromSeed(password, seedPhrase)
        this.setState({ isImportedKeyring: true })
        return vault
      } catch (error) {
        throw new Error(error.message)
      }
    }
  
    handleUnlock = async (password) => {
      const { unlockAccount, history, nextRoute } = this.props
  
      try {
        const seedPhrase = await unlockAccount(password)
        this.setState({ seedPhrase }, () => {
          history.push(nextRoute)
        })
      } catch (error) {
        throw new Error(error.message)
      }
    }
  
    render () {
      const { seedPhrase, isImportedKeyring } = this.state
      const { verifySeedPhrase } = this.props
  
      return (
        <div className="first-time-flow">
          <Switch>
            <Route
              path={INITIALIZE_SEED_PHRASE_ROUTE}
              render={(routeProps) => (
                <SeedPhrase
                  { ...routeProps }
                  seedPhrase={seedPhrase}
                  verifySeedPhrase={verifySeedPhrase}
                />
              )}
            />
            <Route
              path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
              render={(routeProps) => (
                <SeedPhrase
                  { ...routeProps }
                  seedPhrase={seedPhrase}
                  verifySeedPhrase={verifySeedPhrase}
                />
              )}
            />
            <Route
              path={INITIALIZE_CREATE_PASSWORD_ROUTE}
              render={(routeProps) => (
                <CreatePassword
                  { ...routeProps }
                  isImportedKeyring={isImportedKeyring}
                  onCreateNewAccount={this.handleCreateNewAccount}
                  onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase}
                />
              )}
            />
            <Route
              path={INITIALIZE_SELECT_ACTION_ROUTE}
              component={SelectAction}
            />
            <Route
              path={INITIALIZE_UNLOCK_ROUTE}
              render={(routeProps) => (
                <Unlock
                  { ...routeProps }
                  onSubmit={this.handleUnlock}
                />
              )}
            />
            <Route
              exact
              path={INITIALIZE_END_OF_FLOW_ROUTE}
              component={EndOfFlow}
            />
            <Route
              exact
              path={INITIALIZE_WELCOME_ROUTE}
              component={Welcome}
            />
            <Route
              exact
              path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE}
              component={MetaMetricsOptInScreen}
            />
            <Route
              exact
              path="*"
              component={FirstTimeFlowSwitch}
            />
          </Switch>
        </div>
      )
    }
  }
  