import { i18n } from 'arm-common';
import { HBox, LoginContainer, VBox } from 'arm-core-layouts';
import agui, { CoolValidator } from "arm-gui";
import React from "react";
import { connect } from "react-redux";

import { AppConstants } from "../../constants/AppConstants.js";
import AccountActions from "./AccountActions.js";


export default class Login extends React.Component {
    state = {
        useridRule: {
            required: i18n("APP.LOGIN.USER", "Nome utente")
        },
        passwordRule: {
            required: i18n("APP.LOGIN.PSW", "Password")
        },
        otherErrors: null
    }

    login = async () => {
        const { login } = this.props;

        try {
            await login();
            this.goThrough();
        } catch (e) {}
    }
    
    goThrough = () => {
        const { history, to } = this.props;
        history.push({ pathname: to || "/", state: { showCollapse: true } });
    }

    goToTest = async () => {
        const { history } = this.props;

        history.push({ pathname: "/test" });
    }

    onEnter = (e) => e.key === 'Enter' && this.login()

    render() {
        const { userid, password, updateForm } = this.props;
        const { useridRule, passwordRule, otherErrors } = this.state;

        return (
            <LoginContainer header footer={`V. ${AppConstants.VERSION}`} >
                <CoolValidator otherErrors={otherErrors} >
                    <VBox>
                        <agui.CoolTextInput
                            onKeyUp={this.onEnter}
                            required
                            id="userid"
                            autocomplete="on"
                            label={i18n("APP.LOGIN.USER", "Nome utente")}
                            placeholder={i18n("APP.LOGIN.USER.PLACEHOLDER", "Inserisci il nome utente")}
                            value={userid}
                            validationRule={useridRule}
                            onChange={updateForm}
                        />

                        <agui.CoolTextInput
                            onKeyUp={this.onEnter}
                            required
                            id="password"
                            type="password"
                            autocomplete="on"
                            label={i18n("APP.LOGIN.PSW", "Password")}
                            placeholder={i18n("APP.LOGIN.PSW.PLACEHOLDER", "Inserisci la password")}
                            value={password}
                            validationRule={passwordRule}
                            onChange={updateForm}
                        />

                        <HBox style={{ justifyContent: 'flex-end' }}>
                            <agui.aButton
                                bs="secondary"
                                visible={!!AppConstants.DEBUG_VIEW}
                                onClick={this.goToTest}
                                icon='fas fa-bug'
                            />

                            <agui.aButton
                                bs="primary"
                                type="submit"
                                onClick={this.login}
                            > {i18n("APP.LOGIN.LOGIN", "Accedi")} </agui.aButton>
                        </HBox>
                    </VBox>
                </CoolValidator>
            </LoginContainer>
        )
    }
};

const mapStateToProps = (state) => ({
    userid: state.account.userid,
    password: state.account.password,
});

const mapDispatchToProps = (dispatch) => ({
    updateForm: (value, field) => dispatch(AccountActions.updateForm(value, field)),
    login: () => dispatch(AccountActions.login()),
});

Login = connect(mapStateToProps, mapDispatchToProps)(Login);