import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Page, { RCREOptions } from './core/Page';
import configureStore from './data/store';
import {actionCreators} from './core/Container/action';
import {Provider} from 'react-redux';
import componentDriver from './util/componentLoader';
import {isUnsupportedBrowser} from 'bowser';
import {message} from '@native-ads/antd';
import {
    BasicContainer,
    BasicConfig,
    BasicContainerPropsInterface,
    getRuntimeContext,
    ContainerProps,
    runTimeType
} from './core/Container/types';
import {
    BasicSyncProviderInterface,
    BasicAsyncProviderInterface,
    ProviderGlobalOptions,
    ProviderSourceConfig
} from './core/DataProvider/Controller';
import {providerLoaderInstance as providerLoader} from './core/DataProvider/loader';
import {customerLoaderInstance as customerLoader} from './core/DataCustomer/loader';
import funcCustomer from './core/DataCustomer/funcCustomer';
import {BasicCustomerInstance} from './core/DataCustomer/Controller';
import {filter} from './util/filter';
import {createChild} from './util/createChild';
import {Store} from 'redux';
import {RootState} from './data/reducers';
import * as vm from './util/vm';

import './index.css';

export type globalOptions = {
    [s: string]: any
};

export interface RenderPropsInterface {
    code: string;
    global?: globalOptions;
    options?: RCREOptions;
}

export let store: Store<RootState> = configureStore();

export class Render extends React.Component<RenderPropsInterface, {}> {
    static defaultProps = {
        code: '{"title": "空数据", "body": []}',
        global: {}
    };

    constructor(props: RenderPropsInterface) {
        super(props);
    }

    shouldComponentUpdate(nextProps: RenderPropsInterface, nextState: {}) {
        return this.props.code !== nextProps.code;
    }

    componentWillUnmount() {
        // store.dispatch(actionCreators.clearData());
    }

    render() {
        let info;
        try {
            info = JSON.parse(this.props.code);
        } catch (e) {
            console.error(e);
        }

        if (!info) {
            return <h1>JSON 解析异常</h1>;
        }

        // 保证每次render的数据模型都很纯净， 所以要每次渲染新的code
        // 之前要全部清空， 重新来一遍
        class UpdatePage extends Page {
        }

        return (
            <Provider store={store}>
                <UpdatePage
                    title={info.title}
                    body={info.body}
                    debug={info.debug}
                    lang={info.lang}
                    global={this.props.global}
                    options={this.props.options}
                />
            </Provider>
        );
    }
}

export function clearStore() {
    store.dispatch(actionCreators.resetStore());
}

export {
    BasicContainer,
    BasicConfig,
    BasicContainerPropsInterface,
    componentDriver as componentLoader,
    providerLoader,
    customerLoader,
    createChild,
    filter,
    BasicSyncProviderInterface,
    BasicAsyncProviderInterface,
    ProviderGlobalOptions,
    ProviderSourceConfig,
    getRuntimeContext,
    ContainerProps,
    runTimeType,
    BasicCustomerInstance,
    vm,
    funcCustomer
};

if (process.env.REMOTE_DEBUG) {
    let script = document.querySelector('script');
    let url;

    if (script) {
        url = script.src;
    }

    let msg = `you are in remote debug mode, please copy and past <script src="${url}"></script> into your webpages.`;
    console.log(msg);
}

if (isUnsupportedBrowser({msie: '10', chrome: '55', safari: '11', firefox: '10'}, false, window.navigator.userAgent)) {
    message.error('检测到你正在使用低版本的浏览器，请使用最新版Chrome浏览器或者Firefox浏览器');
}

window.React = React;
window.ReactDOM = ReactDOM;
window.RCRE = {
    BasicContainer,
    Render,
    clearStore,
    componentLoader: componentDriver,
    providerLoader,
    customerLoader,
    createChild,
    filter,
    funcCustomer,
    vm
};