import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { StateProvider } from '@bryntum/gantt';
import App from './App';
import BackendState from './lib/BackendState';

/*
    By default, state is saved locally in localStorage. State can also be saved to
    a backend server, however, there are some caveats to consider when doing so:

    #1 - State must be ready at app launch time

    Stateful widgets consume state data during their construction, which cannot be
    done asynchronously. This can be handled with an AJAX fetch issued before
    widgets are created (as in this example), or by "rendering" the state data on
    the server and returning it as content in the page.

    If the state is loaded asynchronously and applied after widget creation, there
    will be a noticeable flicker as the defaults are replaced with the state values.

    #2 - State is not always the same as settings or preferences

    Users may use an application on different device types (desktop, phone, and
    tablet) and expect their experience on each device to be what they had when
    they last used that device.

    #3 - Undesired state is harder to clear

    Potentially undesired application state will not be cleared by clearing browser
    user data (a common troubleshooting strategy) and will follow the user to other
    browsers as well (another common troubleshooting technique).
 */

const renderApp = () => {
    createRoot(document.getElementById('root')!).render(
        <StrictMode>
            <App />
        </StrictMode>
    );
};

if ((new URL(window.location.href)).searchParams.get('state') === 'remote') {  // if ('?state=remote' in URL)
    // For server-side state, initialize the page widgets after the state is loaded from the server.
    // If the state cannot be loaded, launch anyway with no preloaded state instead of showing a blank page
    (new BackendState(StateProvider.setup('memory'))).init().then(renderApp).catch(err => {
        console.error('Failed to load state', err);
        renderApp();
    });
}
else {
    // To use localStorage instead of a backend for state, the launch process is simply this:
    StateProvider.setup('local');
    renderApp();
}