text: const { EventEmitter } = require('events')
  const { Component } = require('react')
  const PropTypes = require('prop-types')
  const connect = require('react-redux').connect
  const h = require('react-hyperscript')
  const Mascot = require('../components/mascot')
  const actions = require('../actions')
  const Tooltip = require('../components/tooltip')
  const getCaretCoordinates = require('textarea-caret')
  const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes')
  const { getEnvironmentType } = require('../../../app/scripts/lib/util')
  const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums')
  
  class InitializeMenuScreen extends Component {
    constructor (props) {
      super(props)
  
      this.animationEventEmitter = new EventEmitter()
      this.state = {
        warning: null,
      }
    }
  
    componentWillMount () {
      const { isInitialized, isUnlocked, history } = this.props
      if (isInitialized || isUnlocked) {
        history.push(DEFAULT_ROUTE)
      }
    }
  
    componentDidMount () {
      document.getElementById('password-box').focus()
    }
  
    render () {
      const { warning } = this.state
  
      return (
        h('.initialize-screen.flex-column.flex-center', [
  
          h(Mascot, {
            animationEventEmitter: this.animationEventEmitter,
          }),
  
          h('h1', {
            style: {
              fontSize: '1.3em',
              textTransform: 'uppercase',
              color: '#7F8082',
              marginBottom: 10,
            },
          }, this.context.t('appName')),
  
          h('div', [
            h('h3', {
              style: {
                fontSize: '0.8em',
                color: '#7F8082',
                display: 'inline',
              },
            }, this.context.t('encryptNewDen')),
  
            h(Tooltip, {
              title: this.context.t('denExplainer'),
            }, [
              h('i.fa.fa-question-circle.pointer', {
                style: {
                  fontSize: '18px',
                  position: 'relative',
                  color: 'rgb(247, 134, 28)',
                  top: '2px',
                  marginLeft: '4px',
                },
              }),
            ]),
          ]),
  
          h('span.error.in-progress-notification', warning),
  
          // password
          h('input.large-input.letter-spacey', {
            type: 'password',
            id: 'password-box',
            placeholder: this.context.t('newPassword'),
            onInput: this.inputChanged.bind(this),
            style: {
              width: 260,
              marginTop: 12,
            },
          }),
  
          // confirm password
          h('input.large-input.letter-spacey', {
            type: 'password',
            id: 'password-box-confirm',
            placeholder: this.context.t('confirmPassword'),
            onKeyPress: this.createVaultOnEnter.bind(this),
            onInput: this.inputChanged.bind(this),
            style: {
              width: 260,
              marginTop: 16,
            },
          }),
  
  
          h('button.primary', {
            onClick: this.createNewVaultAndKeychain.bind(this),
            style: {
              margin: 12,
            },
          }, this.context.t('createDen')),
  
          h('.flex-row.flex-center.flex-grow', [
            h('p.pointer', {
              onClick: () => this.showRestoreVault(),
              style: {
                fontSize: '0.8em',
                color: 'rgb(247, 134, 28)',
                textDecoration: 'underline',
              },
            }, this.context.t('importDen')),
          ]),
  
          h('.flex-row.flex-center.flex-grow', [
            h('p.pointer', {
              onClick: this.showOldUI.bind(this),
              style: {
                fontSize: '0.8em',
                color: '#aeaeae',
                textDecoration: 'underline',
                marginTop: '32px',
              },
            }, this.context.t('classicInterface')),
          ]),
  
        ])
      )
    }
  
    createVaultOnEnter (event) {
      if (event.key === 'Enter') {
        event.preventDefault()
        this.createNewVaultAndKeychain()
      }
    }
  
    createNewVaultAndKeychain () {
      const { history } = this.props
      var passwordBox = document.getElementById('password-box')
      var password = passwordBox.value
      var passwordConfirmBox = document.getElementById('password-box-confirm')
      var passwordConfirm = passwordConfirmBox.value
  
      this.setState({ warning: null })
  
      if (password.length < 8) {
        this.setState({ warning: this.context.t('passwordShort') })
        return
      }
  
      if (password !== passwordConfirm) {
        this.setState({ warning: this.context.t('passwordMismatch') })
        return
      }
  
      this.props.createNewVaultAndKeychain(password)
        .then(() => history.push(DEFAULT_ROUTE))
    }
  
    inputChanged (event) {
      // tell mascot to look at page action
      var element = event.target
      var boundingRect = element.getBoundingClientRect()
      var coordinates = getCaretCoordinates(element, element.selectionEnd)
      this.animationEventEmitter.emit('point', {
        x: boundingRect.left + coordinates.left - element.scrollLeft,
        y: boundingRect.top + coordinates.top - element.scrollTop,
      })
    }
  
    showRestoreVault () {
      this.props.markPasswordForgotten()
      if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
        global.platform.openExtensionInBrowser()
      }
  
      this.props.history.push(RESTORE_VAULT_ROUTE)
    }
  
    showOldUI () {
      this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
    }
  }
  
  InitializeMenuScreen.propTypes = {
    history: PropTypes.object,
    isInitialized: PropTypes.bool,
    isUnlocked: PropTypes.bool,
    createNewVaultAndKeychain: PropTypes.func,
    markPasswordForgotten: PropTypes.func,
    dispatch: PropTypes.func,
  }
  
  InitializeMenuScreen.contextTypes = {
    t: PropTypes.func,
  }
  
  const mapStateToProps = state => {
    const { metamask: { isInitialized, isUnlocked } } = state
  
    return {
      isInitialized,
      isUnlocked,
    }
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)),
      markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()),
    }
  }
  
  module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)
  