import React from 'react';
import { Row, Col, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import AsyncButton from '../components/async-button';
import Card from '../components/card';
import Error from '../components/error';
import Fa from '../components/fa';
import Logo from './logo';
import BorderlessForm from './borderless-form';
import { validateForm } from '../commons/validator';
import { server } from '../commons/server';

/**
 * Values to be validated
 */
const formModel = {
    name: {
        required: true
    },
    login: {
        required: true
    },
    email: {
        required: true,
        email: true
    },
    organization: {}
};

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

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

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

        // clear error messages
        this.setState({ errors: null, fetching: true });

        const self = this;
        server.post('/api/pub/selfreg', res.value).then(resp => {
            if (!resp.success) {
                self.setState({ errors: resp.errors, fetching: false });
                return;
            }

            self.setState({ success: true, fetching: false });
        }).catch(() => self.setState({ fetching: false }));
    }

    /**
     * Render message when user successfully register himself
     * @return {[type]} [description]
     */
    renderSuccess() {
        return React.createElement(
            Card,
            null,
            React.createElement(
                'div',
                { className: 'text-center' },
                React.createElement(
                    'div',
                    { className: 'text-primary' },
                    React.createElement(Fa, { icon: 'check-circle', size: 3 }),
                    React.createElement(
                        'h1',
                        null,
                        __('global.success')
                    )
                ),
                React.createElement(
                    'p',
                    null,
                    __('userreg.success.1')
                )
            )
        );
    }

    /**
     * Render the component
     */
    render() {
        const err = {};
        if (this.state.errors) {
            // transform error from an array to an object
            this.state.errors.forEach(item => {
                err[item.field] = item.msg;
            });
        }

        const fetching = !!this.state.fetching;
        const success = !!this.state.success;

        return React.createElement(
            Logo,
            { backLink: true },
            success ? this.renderSuccess() : React.createElement(
                'div',
                null,
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(
                            'div',
                            { className: 'text-center' },
                            React.createElement(
                                'h3',
                                null,
                                __('userreg')
                            )
                        ),
                        React.createElement(
                            BorderlessForm,
                            null,
                            React.createElement(
                                FormGroup,
                                { validationState: err.name ? 'error' : undefined },
                                React.createElement(
                                    ControlLabel,
                                    null,
                                    __('User.name') + ':'
                                ),
                                React.createElement(FormControl, { type: 'text',
                                    ref: 'name',
                                    placeholder: 'Ex.: Ricardo Memoria', autoFocus: true }),
                                React.createElement(Error, { msg: err.name })
                            ),
                            React.createElement(
                                FormGroup,
                                { validationState: err.login ? 'error' : undefined },
                                React.createElement(
                                    ControlLabel,
                                    null,
                                    __('User.login') + ':'
                                ),
                                React.createElement(FormControl, { type: 'text',
                                    ref: 'login',
                                    placeholder: 'Ex.: RMEMORIA' }),
                                React.createElement(Error, { msg: err.login })
                            ),
                            React.createElement(
                                FormGroup,
                                { validationState: err.email ? 'error' : undefined },
                                React.createElement(
                                    ControlLabel,
                                    null,
                                    __('User.email') + ':'
                                ),
                                React.createElement(FormControl, { type: 'email',
                                    ref: 'email',
                                    placeholder: 'Ex.: rmemoria@teste.com' }),
                                React.createElement(Error, { msg: err.email })
                            ),
                            React.createElement(
                                FormGroup,
                                { validationState: err.organization ? 'error' : undefined },
                                React.createElement(
                                    ControlLabel,
                                    null,
                                    __('login.organization') + ':'
                                ),
                                React.createElement(FormControl, { type: 'text',
                                    ref: 'organization',
                                    placeholder: 'Ex.: MSH' }),
                                React.createElement(Error, { msg: err.organization })
                            )
                        )
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(
                            AsyncButton,
                            { block: true, onClick: this.submit,
                                bsSize: 'large',
                                fetching: fetching, fetchCaption: __('action.entering') },
                            __('action.submit')
                        )
                    )
                )
            )
        );
    }
}