import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Button, Alert} from 'reactstrap';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import {generatePassword} from '../../actions/login/authActions';
import {profileTexts} from '../../constants/profileSettingsConstants';
import {loginMessages} from '../../constants/authConstants';

class ChangePasswordContainer extends Component {
    constructor(props){
        super(props);
        this.state = {
            isPasswordChanged: false
        };

        this.generatePassword = this.generatePassword.bind(this);
    }

    generatePassword() {
        const {mail} = this.props.profileInfo || '';
        this.props.dispatch(generatePassword(mail));
        this.setState({isPasswordChanged: true});
    }

    render() {
        return (
            <div>
                <WiaasBox id="profile-edit">
                    <div className="edit-content">
                        <Row>
                            <Col>
                                <h5>{profileTexts.labels.CHANGE_PASSWORD}</h5>
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <div>
                                    <Button color="secondary"
                                        onClick={this.generatePassword}
                                        className="change-password wiaas-button">{profileTexts.buttons.GENERATE_TOKEN}</Button>
                                </div>
                                {
                                    this.state.isPasswordChanged &&
                                    <div id="change-password-message">
                                        {loginMessages[this.props.errorMessage] && <Alert className='wiaas-alert' color={this.props.messageColor}>{loginMessages[this.props.errorMessage]}</Alert>}
                                    </div>
                                }
                            </Col>
                        </Row>
                    </div>
                </WiaasBox>
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(ChangePasswordContainer);