import React from 'react';
import { Grid, Row, Col, Button, Fade, FormGroup, FormControl } from 'react-bootstrap';
import { app } from '../core/app';

/**
 * Wellcome page - First page displayed under e-TB Manager first time execution
 */
export default class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.langChange = this.langChange.bind(this);
        this.contClick = this.contClick.bind(this);
        this.state = { lang: app.getLang() };
    }

    /**
     * Called when user clicks on the continue button
     */
    contClick() {
        // temporarily goes right to the workspace registration
        app.goto('/init/initoptions');
    }

    /**
     * Called when user select a language
     */
    langChange(evt) {
        const lang = evt.target.value;
        app.setLang(lang);
        window.location.reload(true);
        this.setState({ lang: lang });
    }

    /**
     * Render the component
     */
    render() {
        const langs = app.getState().app.languages;
        const lg = this.state.lang;

        return React.createElement(
            Fade,
            { 'in': true, transitionAppear: true },
            React.createElement(
                Grid,
                null,
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 6, mdOffset: 3 },
                        React.createElement(
                            'h1',
                            null,
                            __('init.welcome')
                        ),
                        React.createElement(
                            'p',
                            { className: 'text-muted' },
                            __('init.welcome.msg1')
                        )
                    ),
                    React.createElement(
                        Col,
                        { md: 6, mdOffset: 3 },
                        React.createElement(
                            FormGroup,
                            { bsSize: 'large' },
                            React.createElement(
                                FormControl,
                                { componentClass: 'select', size: 8, multiple: true, autoFocus: true, value: [lg], onChange: this.langChange },
                                langs.map(lang => React.createElement(
                                    'option',
                                    { key: lang.id, value: lang.id },
                                    lang.name
                                ))
                            )
                        )
                    ),
                    React.createElement(
                        Col,
                        { md: 6, mdOffset: 3 },
                        React.createElement(
                            'div',
                            { className: 'pull-right' },
                            React.createElement(
                                Button,
                                { bsStyle: 'success', bsSize: 'large', onClick: this.contClick },
                                __('action.continue')
                            )
                        )
                    )
                )
            )
        );
    }
}