import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link, Redirect} from 'react-router-dom';
import {
    Alert,
    Form,
    FormGroup,
    Label,
    Input,
    Button
} from 'reactstrap';
import {changePassword} from '../../actions/login/authActions';
import {loginMessages, loginTexts} from '../../constants/authConstants';

class ChangePasswordContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            credentials: {
                password: '',
                repassword: ''
            }
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const field = event.target.name;
        const credentials = this.state.credentials;
        credentials[field] = event.target.value;
        return this.setState({credentials: credentials});
    }

    handleSubmit(event) {
        const token = this.props.match && this.props.match.params ? this.props.match.params.token : '';
        event.preventDefault();
        this.props.dispatch(changePassword(token, this.state.credentials.password, this.state.credentials.repassword));
    }

    render() {
          const {isPasswordChanged} = this.props;

          return (<div className="chnage-password">
            {
                isPasswordChanged && <Redirect push to="/"/>
            }
            <Form onSubmit={this.handleSubmit}>
                <FormGroup className="sign-in">{loginTexts.labels.CHANGE_PASSWORD}</FormGroup>

                <FormGroup className="login-input-group">
                    <Label className="login-input-text" for="password">{loginTexts.labels.NEW_PASSWORD}</Label>
                    <Input className="base" type="password" name="password" id="password" placeholder={loginTexts.labels.NEW_PASSWORD} value={this.state.password} onChange={this.handleChange} autoFocus />
                </FormGroup>

                <FormGroup className="login-input-group">
                    <Label className="login-input-text" for="repassword">{loginTexts.labels.CONFIRM_PASSWORD}</Label>
                    <Input className="base" type="password" name="repassword" id="repassword" placeholder={loginTexts.labels.CONFIRM_PASSWORD} value={this.state.repassword} onChange={this.handleChange} />
                </FormGroup>

                <FormGroup className="login-form-group">
                    <Button className="base-sign-in" type="submit" id="change-button">{loginTexts.buttons.CHANGE_PASSWORD}</Button>
                </FormGroup>

                <FormGroup className="login-form-group" id="login-message">
                    {loginMessages[this.props.errorMessage] && <Alert className='alert-form wiaas-alert' color={this.props.messageColor}>{loginMessages[this.props.errorMessage]}</Alert>}
                </FormGroup>

                <FormGroup className="login-input-group">
                    <hr className="divider"/>
                </FormGroup>

                <FormGroup className="login-input-group">
                    <Link to={'/'}>
                        <Button className="forgot-password">{loginTexts.buttons.BACK_TO_SIGNIN}</Button>
                    </Link>
                </FormGroup>
            </Form>
          </div>);
    }
}

const mapStateToProps = (state) => ({
    errorMessage: state.auth.errorMessage,
    messageColor: state.auth.messageColor,
    isPasswordChanged: state.auth.isPasswordChanged
});

export default connect(mapStateToProps)(ChangePasswordContainer);
