import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app/App'
import * as serviceWorker from './serviceWorker';

import ApolloClient from "apollo-boost";
import {ApolloProvider} from "react-apollo";

import {IntlProvider, addLocaleData} from 'react-intl';
//如果浏览器没有自带intl，则需要在使用npm安装intl之后添加如下代码
// import intl from 'intl';
import zh from 'react-intl/locale-data/zh';
import en from 'react-intl/locale-data/en';
import zh_CN from './language/zh_CN.js';
import en_US from './language/en_US.js';
import {graphqlUrl} from "./config";

addLocaleData([...en, ...zh]);


const client = new ApolloClient({
    // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
    uri: graphqlUrl
});

let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
let language = browserLanguage === 'zh'? "中文" : "English";

class MainApp extends Component {
    constructor() {
        super();
        sessionStorage.setItem("language", language);
        this.state = {
            language: sessionStorage.getItem("language")
        };
    }

    changeLanguage = (language) => {
        // console.log("index changeLanguage",language);
        this.setState({
            language: language
        });
    };

    chooseLocale = (language) => {
        let locale, messages;
        switch (language) {
            case "English":
                locale = 'en';
                messages = en_US;
                return {locale, messages};

            case "中文":
                locale = 'zh';
                messages = zh_CN;
                return {locale, messages};

            default:
                locale = 'zh';
                messages = zh_CN;
                return {locale, messages};
        }
    };

    render() {
        let {language} = this.state;
        let {locale, messages} = this.chooseLocale(language);
        return (
            <ApolloProvider client={client}>
                <IntlProvider locale={locale} messages={messages}>
                    <App language={language} changeLanguage={this.changeLanguage}/>
                </IntlProvider>
            </ApolloProvider>
        )
    }
}

ReactDOM.render(<MainApp/>, document.getElementById('root'));

serviceWorker.unregister();