import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import 'core-js/modules/es.object.assign.js';
import { jsx } from 'react/jsx-runtime';
import { ThemeProvider } from '@mui/material';
import * as React from 'react';
import createAppTheme from '../styles/theme/index.js';
import { useColorMode } from './FutureverseThemeProvider.js';

const ReverseColorModeProvider = ({
  children
}) => {
  const {
    colorMode: globalColorMode
  } = useColorMode();
  const [innerColorMode, setInnerColorMode] = React.useState('light');
  const theme = createAppTheme(innerColorMode);
  // Need to listen to globalColorMode because it is switching the global theme.
  React.useEffect(() => {
    setInnerColorMode(globalColorMode === 'dark' ? 'light' : 'dark');
  }, [globalColorMode]);
  return jsx(ThemeProvider, Object.assign({
    theme: theme
  }, {
    children: children
  }));
};

export { ReverseColorModeProvider, ReverseColorModeProvider as default };
