const inherits = require('util').inherits

const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('../actions')

module.exports = connect(mapStateToProps)(CreateVaultScreen)

inherits(CreateVaultScreen, Component)
function CreateVaultScreen () {
  Component.call(this)
}

function mapStateToProps (state) {
  return {
    warning: state.appState.warning,
  }
}

CreateVaultScreen.prototype.render = function () {
  var state = this.props
  return (

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

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

      // password
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box',
        placeholder: 'New Password (min 8 chars)',
        style: {
          width: 260,
          marginTop: 12,
        },
      }),

      // confirm password
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box-confirm',
        placeholder: 'Confirm Password',
        onKeyPress: this.createVaultOnEnter.bind(this),
        style: {
          width: 260,
          marginTop: 16,
        },
      }),

      h('.flex-row.flex-space-between', {
        style: {
          marginTop: 30,
          width: '50%',
        },
      }, [

        // cancel
        h('button.primary', {
          onClick: this.showInitializeMenu.bind(this),
        }, 'CANCEL'),

        // submit
        h('button.primary', {
          onClick: this.createNewVault.bind(this),
        }, 'OK'),

      ]),

      (!state.inProgress && state.warning) && (
        h('span.in-progress-notification', state.warning)
      ),

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

CreateVaultScreen.prototype.componentDidMount = function () {
  document.getElementById('password-box').focus()
}

CreateVaultScreen.prototype.showInitializeMenu = function () {
  this.props.dispatch(actions.showInitializeMenu())
}

// create vault

CreateVaultScreen.prototype.createVaultOnEnter = function (event) {
  if (event.key === 'Enter') {
    event.preventDefault()
    this.createNewVault()
  }
}

CreateVaultScreen.prototype.createNewVault = function () {
  var passwordBox = document.getElementById('password-box')
  var password = passwordBox.value
  var passwordConfirmBox = document.getElementById('password-box-confirm')
  var passwordConfirm = passwordConfirmBox.value
  // var entropy = document.getElementById('entropy-text-entry').value

  if (password.length < 8) {
    this.warning = 'password not long enough'
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
  if (password !== passwordConfirm) {
    this.warning = 'passwords don\'t match'
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }

  this.props.dispatch(actions.createNewVault(password, ''/* entropy*/))
}