const { Component } = require('react')
const { connect } = require('react-redux')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const { exportAsFile } = require('../../../util')
const { requestRevealSeed, confirmSeedWords } = require('../../../actions')
const { DEFAULT_ROUTE } = require('../../../routes')

class RevealSeedPage extends Component {
  componentDidMount () {
    const passwordBox = document.getElementById('password-box')
    if (passwordBox) {
      passwordBox.focus()
    }
  }

  checkConfirmation (event) {
    if (event.key === 'Enter') {
      event.preventDefault()
      this.revealSeedWords()
    }
  }

  revealSeedWords () {
    const password = document.getElementById('password-box').value
    this.props.requestRevealSeed(password)
  }

  renderSeed () {
    const { seedWords, confirmSeedWords, history } = this.props

    return (
      h('.initialize-screen.flex-column.flex-center.flex-grow', [

        h('h3.flex-center.text-transform-uppercase', {
          style: {
            background: '#EBEBEB',
            color: '#AEAEAE',
            marginTop: 36,
            marginBottom: 8,
            width: '100%',
            fontSize: '20px',
            padding: 6,
          },
        }, [
          'Vault Created',
        ]),

        h('div', {
          style: {
            fontSize: '1em',
            marginTop: '10px',
            textAlign: 'center',
          },
        }, [
          h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
        ]),

        h('textarea.twelve-word-phrase', {
          readOnly: true,
          value: seedWords,
        }),

        h('button.primary', {
          onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)),
          style: {
            margin: '24px',
            fontSize: '0.9em',
            marginBottom: '10px',
          },
        }, 'I\'ve copied it somewhere safe'),

        h('button.primary', {
          onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords),
          style: {
            margin: '10px',
            fontSize: '0.9em',
          },
        }, 'Save Seed Words As File'),
      ])
    )
  }

  renderConfirmation () {
    const { history, warning, inProgress } = this.props

    return (
      h('.initialize-screen.flex-column.flex-center.flex-grow', {
        style: { maxWidth: '420px' },
      }, [

        h('h3.flex-center.text-transform-uppercase', {
          style: {
            background: '#EBEBEB',
            color: '#AEAEAE',
            marginBottom: 24,
            width: '100%',
            fontSize: '20px',
            padding: 6,
          },
        }, [
          'Reveal Seed Words',
        ]),

        h('.div', {
          style: {
            display: 'flex',
            flexDirection: 'column',
            padding: '20px',
            justifyContent: 'center',
          },
        }, [

          h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),

          // confirmation
          h('input.large-input.letter-spacey', {
            type: 'password',
            id: 'password-box',
            placeholder: 'Enter your password to confirm',
            onKeyPress: this.checkConfirmation.bind(this),
            style: {
              width: 260,
              marginTop: '12px',
            },
          }),

          h('.flex-row.flex-start', {
            style: {
              marginTop: 30,
              width: '50%',
            },
          }, [
            // cancel
            h('button.primary', {
              onClick: () => history.goBack(),
            }, 'CANCEL'),

            // submit
            h('button.primary', {
              style: { marginLeft: '10px' },
              onClick: this.revealSeedWords.bind(this),
            }, 'OK'),

          ]),

          warning && (
            h('span.error', {
              style: {
                margin: '20px',
              },
            }, warning.split('-'))
          ),

          inProgress && (
            h('span.in-progress-notification', 'Generating Seed...')
          ),
        ]),
      ])
    )
  }

  render () {
    return this.props.seedWords
      ? this.renderSeed()
      : this.renderConfirmation()
  }
}

RevealSeedPage.propTypes = {
  requestRevealSeed: PropTypes.func,
  confirmSeedWords: PropTypes.func,
  seedWords: PropTypes.string,
  inProgress: PropTypes.bool,
  history: PropTypes.object,
  warning: PropTypes.string,
}

const mapStateToProps = state => {
  const { appState: { warning }, metamask: { seedWords } } = state

  return {
    warning,
    seedWords,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    requestRevealSeed: password => dispatch(requestRevealSeed(password)),
    confirmSeedWords: () => dispatch(confirmSeedWords()),
  }
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage)