/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * Ian Boyes
 *
 * @exports AdminChangePassword
 */

import React from "react";
import CX from "classnames";
import { connect } from "react-redux";
import { Row, Col, Alert, Panel, ButtonToolbar } from "react-bootstrap";

import { setForceReset, setPassword } from "../actions";
import { Input, Checkbox, Button, RelativeTime } from "../../base";

const getInitialState = () => ({
    newPassword: "",
    confirmPassword: "",
    error: false
});

class Password extends React.Component {

    constructor (props) {
        super(props);
        this.state = getInitialState();
    }

    componentWillReceiveProps (nextProps) {
        if (this.props.last_password_change !== nextProps.last_password_change) {
            this.setState(getInitialState());
        }
    }

    componentWillUnmount () {
        this.setState(getInitialState());
    }

    handleChange (e, key) {
        const state = {
            error: this.state.error && this.state.newPassword === this.state.confirmPassword
        };

        state[key] = e.target.value;

        this.setState(state);
    }

    handleSubmit (e) {
        e.preventDefault();

        if (this.state.newPassword === this.state.confirmPassword) {
            this.props.onSubmit(this.props.id, this.state.newPassword);
        } else {
            this.setState({error: true});
        }
    }

    render = () => (
        <Panel>
            <p>
                <em>Last changed </em>
                <RelativeTime time={this.props.last_password_change} em={true}/>
            </p>

            <form onSubmit={this.handleSubmit}>
                <Row>
                    <Col xs={12} md={6}>
                        <Input
                            type="password"
                            placeholder="New Password"
                            value={this.state.newPassword}
                            onChange={(e) => this.handleChange(e, "password")}
                        />
                    </Col>

                    <Col xs={12} md={6}>
                        <Input
                            type="password"
                            placeholder="Confirm Password"
                            value={this.state.confirmPassword}
                            onChange={(e) => this.handleChange(e, "confirm")}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col xs={12} md={6}>
                        <Checkbox
                            label="Force user to reset password on next login"
                            checked={this.props.force_reset}
                            onClick={() => this.props.onSetForceReset(
                                this.props.id,
                                !this.props.force_reset
                            )}
                        />
                    </Col>

                    <Col xs={12} mdHidden lgHidden>
                        <div style={{height: "15px"}}/>
                    </Col>

                    <Col xs={12} md={6}>
                        <ButtonToolbar className="pull-right">
                            <Button
                                type="button"
                                onClick={() => this.setState({confirmPassword: "", newPassword: ""})}
                            >
                                Clear
                            </Button>

                            <Button
                                icon="floppy"
                                type="submit"
                                bsStyle="primary"
                            >
                                Save
                            </Button>
                        </ButtonToolbar>
                    </Col>

                    <Col xs={12} className={CX({hidden: !this.state.error})}>
                        <h5 className="text-danger">
                            Passwords do not match
                        </h5>
                    </Col>
                </Row>
            </form>

            {this.props.error ? (
                <Alert bsStyle="danger">
                    {this.props.error}
                </Alert>
            ) : null}

        </Panel>
    );
}

const mapDispatchToProps = (dispatch) => ({

    onSubmit: (userId, password) => {
        dispatch(setPassword(userId, password));
    },

    onSetForceReset: (userId, enabled) => {
        dispatch(setForceReset(userId, enabled));
    }

});

const Container = connect(() => ({}), mapDispatchToProps)(Password);

export default Container;

@@ -472,20 +472,17 @@
  (%7B%0A    
-newP
+p
 assword:
@@ -493,32 +493,24 @@
 %0A    confirm
-Password
 : %22%22,%0A    er
@@ -946,16 +946,18 @@
 leChange
+ =
  (e, key
@@ -957,16 +957,19 @@
 (e, key)
+ =%3E
  %7B%0A     
@@ -1029,36 +1029,33 @@
 r && this.state.
-newP
+p
 assword === this
@@ -1068,24 +1068,16 @@
 .confirm
-Password
 %0A       
@@ -1146,32 +1146,33 @@
 te(state);%0A    %7D
+;
 %0A%0A    handleSubm
@@ -1177,12 +1177,17 @@
 bmit
+ =
  (e)
+ =%3E
  %7B%0A 
@@ -1233,28 +1233,25 @@
 (this.state.
-newP
+p
 assword === 
@@ -1268,24 +1268,16 @@
 .confirm
-Password
 ) %7B%0A    
@@ -1326,28 +1326,25 @@
  this.state.
-newP
+p
 assword);%0A  
@@ -1411,24 +1411,25 @@
      %7D%0A    %7D
+;
 %0A%0A    render
@@ -1495,27 +1495,15 @@
 %3Cem%3E
-Last changed %3C/em%3E%0A
+%0A      
     
@@ -1512,17 +1512,28 @@
         
- 
+Last changed
  %3CRelati
@@ -1586,24 +1586,46 @@
 em=%7Btrue%7D/%3E%0A
+                %3C/em%3E%0A
             
@@ -1917,20 +1917,17 @@
 s.state.
-newP
+p
 assword%7D
@@ -2289,24 +2289,16 @@
 .confirm
-Password
 %7D%0A      
@@ -3338,33 +3338,18 @@
 firm
-Password: %22%22, newPassword
+: %22%22, pass
 : %22%22

Fix change user password