// @flow
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { Button, Warning, WarningHeader, WarningText } from 'emerald-js-ui';
import muiThemeable from 'material-ui/styles/muiThemeable';
import { required, passwordMatch, minLength } from 'lib/validators';
import { Form, Row, styles as formStyles } from 'elements/Form';
import TextField from 'elements/Form/TextField';
import DashboardButton from 'components/common/DashboardButton';

import screen from 'store/wallet/screen';
import HdPath from 'components/common/HdPath';

import styles from './importMnemonic.scss';

/**
 * Wrapper for redux-form Field component
 */
const HdPathFormField = (props) => {
  const { input: { value, onChange } } = props;
  return (
    <HdPath value={ value } onChange={ onChange }/>
  );
};

export class ImportMnemonic extends React.Component {
  render() {
    const { onBack, backLabel, invalid, handleSubmit, error, muiTheme } = this.props;
    return (
      <Form caption="Import Mnemonic" backButton={ <DashboardButton onClick={ onBack } label={ backLabel }/> } >

        <Row>
          <div style={ formStyles.left }/>
          <div style={ formStyles.right }>
            <div style={{width: '100%'}}>
              <div className={ styles.passwordLabel }>Enter a strong password</div>
              <div className={ styles.passwordSubLabel }>This password will be required to confirm all account
                        operations.
              </div>
              <div style={{marginTop: '30px'}}>
                <Field
                  hintText="At least 8 characters"
                  name="password"
                  type="password"
                  component={ TextField }
                  fullWidth={ true }
                  underlineShow={ false }
                  validate={ [required, minLength(8)] }
                />
              </div>
            </div>
          </div>
        </Row>
        <Row>
          <div style={formStyles.left}/>
          <div style={formStyles.right}>
            <Warning fullWidth={ true }>
              <WarningHeader>Don&#39;t forget it.</WarningHeader>
              <WarningText>If you forget this password, you will lose access to the account and its funds.</WarningText>
            </Warning>
          </div>
        </Row>
        <Row>
          <div style={formStyles.left} />
          <div style={formStyles.right}>
            <Field
              hintText="Confirm Password"
              name="confirmPassword"
              type="password"
              component={TextField}
              fullWidth={true}
              underlineShow={false}
              validate={[required, passwordMatch]}
            />
          </div>
        </Row>

        <Row>
          <div style={ formStyles.left }/>
          <div style={ formStyles.right }>
            <div style={{width: '100%'}}>
              <div className={ styles.mnemonicLabel }>HD derivation path</div>
              <div>
                <Field
                  name="hdpath"
                  component={ HdPathFormField }
                  validate={ [required] }
                />
              </div>
            </div>
          </div>
        </Row>

        <Row>
          <div style={formStyles.left}>
          </div>
          <div style={formStyles.right}>
            <div style={{width: '100%'}}>
              <div className={ styles.mnemonicLabel }>Enter a mnemonic phrase</div>
              <div>
                <Field
                  multiLine={ true }
                  rowsMax={ 4 }
                  rows={ 2 }
                  name="mnemonic"
                  component={ TextField }
                  fullWidth={ true }
                  underlineShow={ false }
                  validate={ [required] }
                />
              </div>
            </div>
          </div>
        </Row>

        <Row>
          <div style={formStyles.left}/>
          <div style={formStyles.right}>
            <Button
              primary
              label="Continue"
              disabled={ invalid }
              onClick={ handleSubmit }
            />
          </div>
        </Row>

        {error && (
          <Row>
            <div style={formStyles.left}/>
            <div style={formStyles.right}>
              <Warning>
                <WarningText>{error}</WarningText>
              </Warning>
            </div>
          </Row>
        )}
      </Form>
    );
  }
}

const importForm = reduxForm({
  form: 'importMnemonic',
  fields: ['password', 'mnemonic', 'hdpath'],
})(ImportMnemonic);

export default connect(
  (state, ownProps) => ({
    initialValues: {
      mnemonic: ownProps.mnemonic,
      hdpath: "m/44'/60'/160720'/0'",
    },
  }),
  (dispatch, ownProps) => ({
    onSubmit: (data) => {
      return ownProps.onContinue(data);
    },

    onBack: () => {
      if (ownProps.onBack) {
        ownProps.onBack();
      } else {
        dispatch(screen.actions.gotoScreen('home'));
      }
    },
  })
)(muiThemeable()(importForm));


@@ -123,16 +123,22 @@
 import %7B
+ Page,
  Button,
@@ -198,16 +198,65 @@
 js-ui';%0A
+import %7B Back %7D from 'emerald-js-ui/lib/icons3';%0A
 import m
@@ -388,14 +388,8 @@
 rt %7B
- Form,
  Row
@@ -487,73 +487,8 @@
 ld';
-%0Aimport DashboardButton from 'components/common/DashboardButton';
 %0A%0Aim
@@ -917,19 +917,8 @@
 ack,
- backLabel,
  inv
@@ -946,18 +946,8 @@
 rror
-, muiTheme
  %7D =
@@ -983,20 +983,18 @@
    %3C
-Form caption
+Page title
 =%22Im
@@ -1012,37 +1012,24 @@
 ic%22 
-backButton=%7B %3CDashboardButton
+leftIcon=%7B %3CBack
  onC
@@ -1038,44 +1038,21 @@
 ck=%7B
- 
 onBack
- 
 %7D 
-label=%7B backLabel %7D
 /%3E %7D
- %3E%0A
+%3E
 %0A   
@@ -4420,20 +4420,20 @@
       %3C/
-Form
+Page
 %3E%0A    );

update import mnemonic to Page component