import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Sites } from 'cordova-sites/dist/client';

import 'bootstrap/dist/css/bootstrap.min.css';
import '../sass/index.scss';

import { persistor, store } from './Store/store';
import { Provider } from 'react-redux';
import { PrayerCircle } from './PrayerCircle/PrayerCircle';
import { PersistGate } from 'redux-persist/integration/react';

const Wrapper = React.memo(({ children }) => {
    return (
        <PersistGate persistor={persistor} loading={null}>
            {children}
        </PersistGate>
    );
});

ReactDOM.render(
    <Provider store={store}>
        <Sites startSite={PrayerCircle} basePath={window.location.origin} contentWrapper={Wrapper} />
    </Provider>,
    document.getElementById('react-container')
);

let oldDesign: 'material' | 'flat' = 'material';
store.subscribe(() => {
    const newDesign = store.getState().settings.design;
    if (oldDesign !== newDesign) {
        oldDesign = newDesign;

        if (newDesign === 'material') {
            document.body.classList.remove('flat-design');
            document.body.classList.add('material-design');
        } else {
            document.body.classList.remove('material-design');
            document.body.classList.add('flat-design');
        }
    }
});