import { PureComponent, Suspense } from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import { RouterProvider } from 'react-router-dom';
import authAutomat from './automats/authAutomat';
import LoginPage from './components/LoginPage';
import CompanySetupDialog from './components/CompanySetupDialog';
import { router } from './appRouter';

function PageFallback() {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        minHeight: 200,
      }}
    >
      <CircularProgress />
    </Box>
  );
}

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = authAutomat.state;
  }

  componentDidMount() {
    this.unsubscribe = authAutomat.subscribe(this, ['status', 'user']);
  }

  componentWillUnmount() {
    this.unsubscribe?.();
  }

  render() {
    const { status, user } = this.state;

    if (status === 'loading') {
      return (
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: 'var(--df-vh, 100vh)',
            bgcolor: 'background.default',
          }}
        >
          <CircularProgress />
        </Box>
      );
    }

    if (status !== 'authed') {
      return <LoginPage />;
    }

    if (user?.selectedCompanyId == null) {
      return <CompanySetupDialog />;
    }

    return (
      <Suspense fallback={<PageFallback />}>
        <RouterProvider router={router} />
      </Suspense>
    );
  }
}

export default App;