import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import Alert from '../components/Alert'
import { KeychainActions } from '../store/keychain'
import InputGroup from '../components/InputGroup'
import { isPasswordValid } from '../utils/account-utils'

function mapStateToProps(state) {
  return {
    encryptedMnemonic: state.keychain.encryptedMnemonic
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(KeychainActions, dispatch)
}

class CreateAccountPage extends Component {
  static propTypes = {
    initializeWallet: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props)

    this.state = {
      password: '',
      password2: '',
      alerts: []
    }

    this.updateAlert = this.updateAlert.bind(this)
    this.createAccount = this.createAccount.bind(this)
    this.onValueChange = this.onValueChange.bind(this)
  }

  updateAlert(alertStatus, alertMessage) {
    this.setState({
      alerts: [{ status: alertStatus, message: alertMessage }]
    })
  }

  createAccount() {
    if (isPasswordValid(this.state.password)) {
      if (this.state.password === this.state.password2) {
        this.updateAlert('success', 'Creating your account...')
        this.props.initializeWallet(this.state.password)
      } else {
        this.updateAlert('danger', 'Passwords must match')
      }
    } else {
      this.updateAlert('danger', 'Password must be at least 8 characters')
    }
  }

  onValueChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render() {
    return (
      <div className="container out-block-wrap">
        <div className="container-fluid out-block">
          <div className="row">
            <div className="centered">
              <h1><img src="images/ch-bw-rgb-rev.svg" alt="Chord logo" width="60px" /></h1>
              <h4>The blockchain browser</h4>
            </div>
            <h5 className="text-xs-center">Create Account</h5>
              <div className="out-form-group">
              { this.state.alerts.map(function(alert, index) {
                return (
                  <Alert key={index} message={alert.message} status={alert.status} />
                )
              })}
              <InputGroup name="password" type="password" label="Password"
                placeholder="Password" data={this.state} onChange={this.onValueChange} />
              <InputGroup name="password2" type="password" label="Password (again)"
                placeholder="Password" data={this.state} onChange={this.onValueChange} />
              <div className="form-group">
                <div className="col-xs-offset-3 col-xs-8 pull-right">
                  <button className="btn btn-block btn-secondary" onClick={this.createAccount}>
                    Create
                  </button>
                </div>
              </div>
            </div>
            <p className="text-xs-center">Already have an account?
              <br />
              <Link to="/account/restore">Restore from backup</Link>
            </p>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)

@@ -1958,12 +1958,39 @@
    %3C
-h4%3ET
+p className=%22lead-out%22%3Ebrowse t
 he b
@@ -2002,20 +2002,11 @@
 hain
- browser%3C/h4
+%3C/p
 %3E%0A  
@@ -2007,37 +2007,83 @@
 /p%3E%0A            
-%3C/div
+  %3Ch1 className=%22text-xs-center%22%3ECreate Account%3C/h1
 %3E%0A            %3Ch
@@ -2084,11 +2084,12 @@
     
-%3Ch5
+  %3Cp
  cla
@@ -2100,42 +2100,226 @@
 me=%22
-text-xs-center%22%3ECreate Account%3C/h5
+lead-out%22%3E%0A              Welcome to the first blockchain browser.%E2%80%A8%3Cbr/%3E%0A              Create a blockchain id and start surfing the blockchain.%3Cbr/%3E%0A              The future is here!%0A              %3C/p%3E%0A            %3C/div
 %3E%0A  

update to create account content