'use strict';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            data: null
        };

        MX.setState = (data, cb) => {
            this.setState({
                ...this.state,
                data: data
            }, cb);
        };
    }

    componentDidMount() {
        if (!this.props.dataUrl) {
            setTimeout(function () {
                $(document).trigger('pageready');
            }, 1);
            return;
        }

        let dataUrl = this.props.dataUrl;

        if (typeof dataUrl === 'function') {
            dataUrl = dataUrl();
        }

        this.setState({
            loading: true,
            data: null
        }, (function () {
            $.get(dataUrl, (function (res) {
                this.setState({
                    loading: false,
                    data: __preprocess(res.data)
                }, function () {
                    $(document).trigger('pageready');
                });
            }).bind(this));
        }).bind(this));
    }

    render() {
        return this.renderContent();
    }

    renderContent() {
        if (this.props.dataUrl) {
            return this.renderNetwork();
        } else {
            return this.hardRender();
        }
    }

    //---handlers---//

    renderNetwork() {
        if (this.state.loading) {
            return (
                <div className="_mx-global-loading-wrap">
                    <Loading color="#000"/>
                </div>
            );
        }

        return this.hardRender();
    }
}

function formatUrl(url) {
    url = url.split('?');

    var params = parseParams(location.search);
    var urlParams = parseParams(url.slice(1).join('?'));

    params = mergeParams(urlParams, params);

    var search = $.param(params);

    if (!search) {
        return url[0];
    }

    return url[0] + '?' + search;
}

function parseParams(search) {
    var params = {};

    search = search.replace(/^\?*/, '').split('&');

    search.map(function (item) {
        item = item.split('=');

        var name = decodeURIComponent(item[0]);
        var value = decodeURIComponent(item.slice(1).join('='));

        if (params[name]) {
            if (!$.isArray(params[name])) {
                params[name] = [params[name]];
            }

            params[name].push(value);
        } else {
            params[name] = value;
        }
    });

    return params;
}

function mergeParams(obj1, obj2) {
    var keys = Object.getOwnPropertyNames(obj2);

    keys.forEach(function (key) {
        var source = obj2[key];

        if (!obj1[key]) {
            obj1[key] = source;
        } else {
            if (!$.isArray(source)) {
                source = [source];
            }

            if (!$.isArray(obj1[key])) {
                obj1[key] = [obj1[key]];
            }

            obj1[key] = obj1[key].concat(source);
        }
    });

    return obj1;
}