import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    Alert,
    Form,
    FormGroup,
    Label,
    Input,
    Button
} from 'reactstrap';
import './login.css';
import {validateCredentials, generatePassword} from '../../actions/login/authActions';
import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
import {loginMessages, loginTexts} from '../../constants/authConstants';

class LogInForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            credentials: {
                username: '',
                password: ''
            },
            modal: false,
            email: ''
        };

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

    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    }

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

    handleSubmit(event) {
        this.props.dispatch(validateCredentials(this.state.credentials.username, this.state.credentials.password));
        event.preventDefault();
    }

    handlePwdGenerator(currentDialogState) {
        this.props.dispatch(generatePassword(currentDialogState.inputValue));
    }

    setDialogParams(dialogContent) {
        this.props.dispatch(setDialogOpenFlag(true));
        this.props.dispatch(setDialogContent(dialogContent));
    }

    render() {
        const dialogContent = {
            buttons: [
                {
                    color:'success',
                    action: this.handlePwdGenerator,
                    name: 'Recover password',
                    id: 'recover-password-confirmation'

                }, {
                    color:'secondary',
                    name: 'Cancel',
                    id: 'cancel-recover-password-item'
                }
            ],
            header: 'Recover password',
            body: 'Please enter your email address for password generation',
            inputArray: [
                {
                    class: 'base',
                    type: 'email',
                    placeholder: 'your@email.com'
                }
            ]
        };

        return (
                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup className="sign-in">{loginTexts.labels.SIGN_IN}</FormGroup>

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

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

                        <FormGroup className="login-form-group">
                            <Button className="base-sign-in" type="submit" id="login-button" >{loginTexts.buttons.SIGN_IN}</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">
                            <Button className="forgot-password" id="forgot-password-button" onClick={() => this.setDialogParams(dialogContent)}>
                                {loginTexts.buttons.FORGOT_PASSWORD}
                            </Button>
                        </FormGroup>
                    </Form>);
    }
}
const mapStateToProps = (state) => ({errorMessage: state.auth.errorMessage, messageColor: state.auth.messageColor});
export default connect(mapStateToProps)(LogInForm);
