import React from 'react';
import { Row, Col, Alert, FormGroup, FormControl, InputGroup, Checkbox } from 'react-bootstrap';
import AsyncButton from '../components/async-button';
import Fa from '../components/fa';
import Error from '../components/error';
import { validateForm } from '../commons/validator';
import { app } from '../core/app';
import { server } from '../commons/server';
import Logo from './logo';
import BorderlessForm from './borderless-form';
import { authenticate } from '../sys/session';

/**
 * Values to be validated
 */
const formModel = {
    user: {
        required: true
    },
    pwd: {
        required: true
    }
};

/**
 * Wellcome page - First page displayed under e-TB Manager first time execution
 */
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.loginClick = this.loginClick.bind(this);
    }

    /**
     * Called when user clicks on the continue button
     */
    loginClick() {
        const res = validateForm(this, formModel);

        // is there any validation error ?
        if (res.errors) {
            this.setState({ errors: res.errors });
            return;
        }

        // hide messages and disable button
        this.setState({ invalid: false, errors: null, fetching: true });
        const val = res.value;

        const self = this;

        // request login to the server
        this.login(val.user, val.pwd).then(data => {
            if (data) {
                authenticate().then(session => {
                    // check which page to go based on session data
                    if (session.unitsCount === 1 || app.getState().app.clientMode) {
                        app.goto('/sys/unit/cases?id=' + session.unitId);
                    } else {
                        app.goto('/sys/workspace/cases');
                    }
                });
            } else {
                self.setState({ fetching: false, invalid: true });
            }
        }).catch(err => {
            self.setState({ fetching: false });
            return Promise.reject(err);
        });
    }

    /**
     * Perform login into the system. Returns a promise that will indicate if user
     * @param  {String} user the user account
     * @param  {String} pwd  the user password
     * @return {Promise}      Promise that will be resolved with the authentication token, or null if failed
     */
    login(user, pwd) {
        return server.post('/api/auth/login', { username: user, password: pwd }).then(data => {
            if (!data.success) {
                return null;
            }

            // register the authentication token in the cookies
            const authToken = data.authToken;
            app.setCookie('autk', authToken);
            return authToken;
        });
    }

    /**
     * Render the component
     */
    render() {
        const st = this.state;
        const err = st && st.errors || {};
        const fetching = st && st.fetching;
        const login = app.getState().login || '';
        const allowRegPage = app.getState().app.allowRegPage;

        return React.createElement(
            Logo,
            null,
            React.createElement(
                'div',
                null,
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(
                            'div',
                            { className: 'text-center' },
                            React.createElement(
                                'p',
                                { className: 'text-muted' },
                                __('login.msg1')
                            )
                        ),
                        React.createElement(
                            BorderlessForm,
                            null,
                            React.createElement(
                                FormGroup,
                                { validationState: err.user ? 'error' : undefined },
                                React.createElement(
                                    InputGroup,
                                    null,
                                    React.createElement(
                                        InputGroup.Addon,
                                        null,
                                        React.createElement(Fa, { icon: 'user' })
                                    ),
                                    React.createElement(FormControl, { type: 'text',
                                        ref: 'user',
                                        placeholder: __('User.login'), autoFocus: !login,
                                        defaultValue: login
                                    })
                                ),
                                React.createElement(Error, { msg: err.user })
                            ),
                            React.createElement(
                                FormGroup,
                                { validationState: err.pwd ? 'error' : undefined },
                                React.createElement(
                                    InputGroup,
                                    null,
                                    React.createElement(
                                        InputGroup.Addon,
                                        null,
                                        React.createElement(Fa, { icon: 'key' })
                                    ),
                                    React.createElement(FormControl, { type: 'password',
                                        autoFocus: !!login,
                                        ref: 'pwd',
                                        placeholder: __('User.password')
                                    })
                                ),
                                React.createElement(Error, { msg: err.pwd })
                            )
                        )
                    )
                ),
                st && st.invalid && React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(
                            Alert,
                            { bsStyle: 'danger' },
                            __('login.invaliduserpwd')
                        )
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(
                            Checkbox,
                            null,
                            __('login.rememberme')
                        )
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(
                            AsyncButton,
                            { block: true, onClick: this.loginClick,
                                bsSize: 'large',
                                fetching: fetching, fetchCaption: __('action.entering') },
                            __('action.enter')
                        )
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12, className: 'text-center mtop-2x' },
                        React.createElement(
                            'a',
                            { href: '#/pub/forgotpwd' },
                            __('forgotpwd')
                        )
                    )
                ),
                allowRegPage && React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12, className: 'mtop-2x' },
                        React.createElement(
                            'a',
                            { className: 'btn btn-block btn-lg btn-default', href: '#/pub/selfreg' },
                            __('userreg')
                        )
                    )
                )
            )
        );
    }
}