import React from 'react';
import {withNamespaces} from "react-i18next";

import {withAuth} from "../../feature/Auth";
import {injectSheet} from "../../lib/theme";
import {Button} from '../../component/Form';
//import PasswordReset from './PasswordReset';
import {bindForm} from "../FormApi";
import StyleGrid from "../../lib/StyleGrid";
import Loading from '../../component/LoadingSmall';
import {withApiControl} from "../ApiControl";

const styling = theme => ({
    wrapper: {
        margin: '0 auto',
        [StyleGrid.smUp]: {
            width: '280px'
        }
    },
    btn: {
        textAlign: 'center',
        marginTop: theme.gutter.base * 4 + 'px'
    },
    reset: {
        marginTop: theme.gutter.base * 4 + 'px'
    }
});

class Login extends React.Component {

    constructor(props) {
        super(props);

        // binding internal sender through `connect`
        props.connect.sender(this.sender.bind(this));
    }

    sender(evt, data) {
        const {authVerify, onLoggedIn} = this.props;
        // modify submit values before sending to server
        return authVerify(data, onLoggedIn);
    }

    render() {
        const {
            t, classes, theme,
            FormApi, InputGroupText, process, errSend,
            loggedIn, logout
        } = this.props;

        return (
            <React.Fragment>
                {loggedIn ? (
                    'sended' === process ?
                        /* Just logged in */
                        // redir now handled from AuthProvider
                        null :
                        /* Logged in but not after a state-change */
                        <p style={{display: 'none'}}>{t('login.already')}<br/><Button onClick={logout}>Logout</Button></p>
                ) : null}
                <div className={classes.wrapper}>
                    <FormApi>
                        <h3>{t('login.name')}</h3>

                        <InputGroupText style={{wrapper: {margin: theme.gutter.base * 4 + 'px 0'}}} name='username' lbl={t('username')} required/>
                        <InputGroupText style={{wrapper: {margin: theme.gutter.base * 4 + 'px 0'}}} name='password' type='password' lbl={t('pass')} required/>
                        {errSend.backendErr && 'connection-error' === errSend.backendErr ?
                            <p>{t('process.' + errSend.backendErr)}</p> :
                            process && 'received' !== process ?
                                <React.Fragment>
                                    {'sending+error' !== process ?
                                        <Loading
                                            center={true}
                                        /> : null}
                                    <p>{t('process.' + process)}</p>
                                </React.Fragment>
                                : null}
                        {process && 'sending' !== process ?
                            <Button style={styling(theme).btn}>{t('login.submit')}</Button>
                            : null}
                    </FormApi>
                    {/*<PasswordReset style={styling(theme).reset}/>*/}
                </div>
            </React.Fragment>
        );
    }
}

export default withNamespaces(['page--auth'])(withAuth(withApiControl(bindForm(injectSheet(styling)(Login)))));
