const ce = React.createElement;
const nbsp = '\u00a0';

// -- Functions -- //

function loadScript(url, fnLoad, fnError) {
    const script = document.createElement("script");
    script.src = url;
    script.onload = fnLoad;
    script.onerror = fnError;
    document.body.appendChild(script);
}

function loadStyle(url, fnLoad, fnError) {
    const style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = url;
    style.onload = fnLoad;
    style.onerror = fnError;
    document.body.appendChild(style);
}

// -- Bootstrap -- //

var MainMenuItem = React.createClass({
    render: function(){
        var liActive = {};
        var aText = this.props.title;

        if (this.props.active) {
            liActive = {className: 'active'};
            aText = [ce('span', {className: 'glyphicon glyphicon-menu-right'}), ' ', this.props.title];
        }

        return(
            ce('li', liActive, ce('a', {href: this.props.href}, aText))
        )
    }
});

var Navbar = React.createClass({
    render: function(){return(
        ce('nav', {className: 'navbar navbar-default navbar-fixed-top'},
            ce('div', {className: 'container'},
                ce('div', {className: 'navbar-header'},
                    ce('button', {
                            type: 'button',
                            className: 'navbar-toggle collapsed',
                            'data-toggle': 'collapse',
                            'data-target': '#bs-example-navbar-collapse-1',
                            'aria-expanded': 'false'
                        },
                        ce('span', {className: 'icon-bar'}),
                        ce('span', {className: 'icon-bar'}),
                        ce('span', {className: 'icon-bar'})
                    ),
                    ce('a', {className: 'navbar-brand', href: '#'}, ce('b', null, 'ASys'), '://')
                ),
                ce('div', {className: 'collapse navbar-collapse', id: 'bs-example-navbar-collapse-1'},
                    ce('ul', {className: 'nav navbar-nav'}, this.props.items)
                )
            )
        )
    )}
});

var Panel = React.createClass({
    render: function(){
        var colored = 'default';
        if (this.props.colored) {
            colored = this.props.colored;
        }

        var elements = [ce('div', {className: 'panel-body'}, this.props.children)];
        if (this.props.title) {
            elements.unshift(ce('div', {className: 'panel-heading'}, this.props.title));
        }

        return(
            ce('div', {className: 'panel panel-'+colored}, elements)
        )
    }
});

var Button = React.createClass({
    render: function(){
        var colored = 'default';
        var btnSize = '';

        if (this.props.colored) {
            colored = this.props.colored;
        }
        if (this.props.btnSize) {
            btnSize = 'btn-'+this.props.btnSize;
        }

        return (
            ce('button', {className: 'btn btn-'+colored+' '+btnSize,
                    onClick: this.props.onClick},
                this.props.children)
        )
    }
});

var Checkbox = React.createClass({
    render: function(){
        return (ce('div', {className: 'checkbox '+this.props.className},
            ce('input', {type: 'checkbox', id: this.props.id, defaultChecked: false}),
            ce('label', {htmlFor: this.props.id}, this.props.children)
        ))
    }
});

// -- Разное -- //

var ContentModule = React.createClass({
    render:function(){return(
        ce(Panel, null, 'no module content')
    )}
});