import React from 'react';
import { Modal, Button, Nav, NavItem } from 'react-bootstrap';
import { Fa } from '../../components';
import { app } from '../../core/app';

export default class LanguageSel extends React.Component {

    constructor(props) {
        super(props);

        this.close = this.close.bind(this);
    }

    componentWillMount() {
        const self = this;
        const handler = app.add(evt => {
            if (evt === 'change-lang') {
                self.setState({ show: true });
            }
        });

        this.state = { handler: handler };
    }

    shouldComponentUpdate(np, newState) {
        return !!newState.show;
    }

    componentWillUnmount() {
        app.remove(this.state.handler);
    }

    close() {
        this.setState({ show: null });
        this.forceUpdate();
    }

    changeLang(lang) {
        return () => {
            app.setLang(lang.id);
        };
    }

    render() {
        if (!this.state.show) {
            return null;
        }

        const langs = app.getState().app.languages;
        const sellang = app.getLang();

        return React.createElement(
            Modal,
            { show: this.state.show, onHide: this.close },
            React.createElement(
                Modal.Header,
                { closeButton: true },
                React.createElement(
                    Modal.Title,
                    { id: 'contained-modal-title' },
                    __('changelang')
                )
            ),
            React.createElement(
                Modal.Body,
                null,
                React.createElement(
                    Nav,
                    { bsStyle: 'pills', stacked: true, className: 'nav-select' },
                    langs.map(lang => React.createElement(
                        NavItem,
                        { bsStyle: 'pills',
                            key: lang.id,
                            onClick: this.changeLang(lang),
                            active: lang.id === sellang },
                        React.createElement(Fa, { icon: lang.id === sellang ? 'chevron-right' : '', className: 'text-success' }),
                        lang.name
                    ))
                )
            ),
            React.createElement(
                Modal.Footer,
                null,
                React.createElement(
                    Button,
                    { bsStyle: 'primary', onClick: this.close },
                    __('action.cancel')
                )
            )
        );
    }
}

LanguageSel.propTypes = {};