/** @format */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import message from './components/message';
import {getLocalStorage} from './utils/webStorage';
import {INIT_THEMECOLORS} from './const/status';
import './styles/global.less';
import './styles/reset.scss';
import Router from './app';
const element: HTMLElement | null = document.getElementById('root');
interface Icolor {
    [propIndex: string]: string;
}
interface Istate {
    colors: Icolor;
    displayColorPicker: boolean;
}
let initialColor = INIT_THEMECOLORS;
class App extends React.Component<any, Istate> {
    constructor(props: any) {
        super(props);
        let colors = {};
        try {
            const [error, localTheme] = getLocalStorage('app-theme');
            if (!error) {
                colors = Object.assign({}, initialColor, localTheme);
            }
        } finally {
            window.less
                .modifyVars(colors)
                .then(() => {
                    console.log('主题切换成功');
                })
                .catch((error: Error) => {
                    console.log(error);
                    message.error(`主题切换失败`);
                });
        }
    }

    render() {
        return this.props.children;
    }
}

const render = (Component: Function) => {
    ReactDOM.render(
        <AppContainer>
            <>
                <App>
                    <Component />
                </App>
            </>
        </AppContainer>,
        element,
    );
};
render(Router);

if (module.hot) {
    module.hot.accept('./app', () => {
        render(Router);
    });
}
