import React from 'react';
import { Grid, Row, Col, Fade, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox } from 'react-bootstrap';
import { validateForm } from '../commons/validator';
import { server } from '../commons/server';
import Success from './success';
import Callout from '../components/callout';
import Card from '../components/card';
import AsyncButton from '../components/async-button';

/**
 * Form validation model
 */
const form = {
    wsname: {
        required: true,
        min: 3,
        max: 250
    },
    email: {
        required: true,
        email: true
    },
    pwd: {
        required: true,
        password: true
    },
    pwd2: {
        required: true,
        validate: function () {
            if (this.pwd2 !== this.pwd) {
                return __('validation.pwdNotSame');
            }
            return null;
        }
    }
};

export default class NewWorkspace extends React.Component {
    constructor(props) {
        super(props);
        this.contClick = this.contClick.bind(this);
        this.onDemoChange = this.onDemoChange.bind(this);
        this.state = { data: { demoData: true } };
    }

    /**
     * Called when user clicks on the continue button
     */
    contClick() {
        const vals = validateForm(this, form);

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

        this.setState({ errors: {}, fetching: true });

        const v = vals.value;
        const data = {
            workspaceName: v.wsname,
            adminPassword: v.pwd,
            adminEmail: v.email,
            demoData: this.state.data.demoData
        };

        const self = this;

        // request server to register workspace
        server.post('/api/init/workspace', data).then(res => {
            if (res.errors) {
                self.setState({ errors: res.errors, fetching: false });
            } else {
                self.setState({ success: true, wsname: v.wsname, fetching: false });
            }
        }).catch(() => self.setState({ fetching: false }));
    }

    onDemoChange(evt) {
        const checked = evt.target.checked;
        const data = this.state.data;
        data.demoData = checked;
        this.setState({ data: data });
    }

    /**
     * Render the component
     */
    render() {
        const err = this.state.errors || {};
        const fetching = this.state.fetching;
        const success = this.state.success;

        let content;

        if (success) {
            content = React.createElement(Success, { wsname: this.state.wsname });
        } else {
            content = React.createElement(
                Grid,
                { fluid: true },
                React.createElement(
                    Col,
                    { sm: 8, smOffset: 2, lg: 8, lgOffset: 2 },
                    React.createElement(
                        Card,
                        { title: __('init.ws.create'), className: 'mtop-2x' },
                        React.createElement(
                            'div',
                            null,
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        FormGroup,
                                        { validationState: err.wsname ? 'error' : undefined },
                                        React.createElement(
                                            ControlLabel,
                                            null,
                                            __('init.ws.name') + ':'
                                        ),
                                        React.createElement(FormControl, { type: 'text', ref: 'wsname', autoFocus: true }),
                                        React.createElement(
                                            HelpBlock,
                                            null,
                                            err.wsname
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 12 },
                                    React.createElement(
                                        Callout,
                                        { bsStyle: 'warning' },
                                        React.createElement(
                                            'h4',
                                            null,
                                            'Administrator'
                                        ),
                                        React.createElement(
                                            'p',
                                            null,
                                            __('init.ws.admininfo')
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        FormGroup,
                                        null,
                                        React.createElement(
                                            ControlLabel,
                                            null,
                                            __('init.ws.adminname') + ':'
                                        ),
                                        React.createElement(FormControl, { type: 'text', disabled: true, value: 'ADMIN' })
                                    )
                                ),
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        FormGroup,
                                        { validationState: err.email ? 'error' : undefined },
                                        React.createElement(
                                            ControlLabel,
                                            null,
                                            __('init.ws.adminemail') + ':'
                                        ),
                                        React.createElement(FormControl, { type: 'text', ref: 'email' }),
                                        React.createElement(
                                            HelpBlock,
                                            null,
                                            err.email
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        FormGroup,
                                        { validationState: err.pwd ? 'error' : undefined },
                                        React.createElement(
                                            ControlLabel,
                                            null,
                                            __('init.ws.adminpwd') + ':'
                                        ),
                                        React.createElement(FormControl, { type: 'password', ref: 'pwd' }),
                                        React.createElement(
                                            HelpBlock,
                                            null,
                                            err.pwd
                                        )
                                    )
                                ),
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        FormGroup,
                                        { validationState: err.pwd2 ? 'error' : undefined },
                                        React.createElement(
                                            ControlLabel,
                                            null,
                                            __('init.ws.adminpwd2') + ':'
                                        ),
                                        React.createElement(FormControl, { type: 'password', ref: 'pwd2' }),
                                        React.createElement(
                                            HelpBlock,
                                            null,
                                            err.pwd2
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                Row,
                                null,
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        Checkbox,
                                        { checked: this.state.data.demoData,
                                            ref: 'chkAdd',
                                            onChange: this.onDemoChange },
                                        __('init.adddemodata')
                                    )
                                ),
                                React.createElement(
                                    Col,
                                    { sm: 6 },
                                    React.createElement(
                                        'div',
                                        { className: 'pull-right' },
                                        React.createElement(
                                            AsyncButton,
                                            { fetching: fetching, bsSize: 'large', onClick: this.contClick },
                                            __('action.create')
                                        )
                                    )
                                )
                            )
                        )
                    )
                )
            );
        }

        return React.createElement(
            Fade,
            { 'in': true, transitionAppear: true },
            content
        );
    }
}