import * as React from 'react';
import {hydrate} from 'react-dom';
import {CacheProvider} from '@emotion/react';
import {RemixBrowser} from '@remix-run/react';

import ClientStyleContext from './styles/client.context';
import createEmotionCache from './styles/createEmotionCache';

interface ClientCacheProviderProps {
  children: React.ReactNode;
}

// might work to inject styles but we are currently pulling CSS from CDN
function ClientCacheProvider({children}: ClientCacheProviderProps) {
  const [cache, setCache] = React.useState(createEmotionCache());

  const reset = React.useCallback(() => {
    setCache(createEmotionCache());
  }, []);

  return (
    <ClientStyleContext.Provider value={{reset}}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
  );
}

hydrate(
  <ClientCacheProvider>
    <RemixBrowser />
  </ClientCacheProvider>,
  document
);