import { useEffect } from 'react';
import { theme } from '@kevisual/center-components/theme';
import { ThemeProvider } from '@mui/material/styles';
import { Left } from './layout/Left';
import { Main } from './main/index';
import { ToastContainer } from 'react-toastify';
import { useSettingsStore } from './store/settings';
import { CircularProgress } from '@mui/material';
import { useResourceStore } from './store/resource';

export const App = () => {
  const { init, mounted, settings } = useSettingsStore();
  const { setPrefix, init: initResource } = useResourceStore();
  useEffect(() => {
    init();
    initResource();
  }, []);
  useEffect(() => {
    if (settings.prefix && mounted) {
      setPrefix(settings.prefix);
    }
  }, [mounted, settings.prefix]);
  if (!mounted) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <CircularProgress />
      </div>
    );
  }

  return (
    <ThemeProvider theme={theme}>
      <Left>
        <Main />
      </Left>
      <ToastContainer />
    </ThemeProvider>
  );
};
