import React, { useLayoutEffect } from 'react';
import './App.css';
import { FileDrop } from './features/loader/FileDrop';
import { Main } from './features/main/Main';
import { Intro } from './features/intro/Intro';
import { Loading } from './features/intro/Loading';
import { HistoryManager } from './features/history/HistoryManager';
import { useSelector } from './app/store';
import { selectLoaded, selectLoading } from './features/loader/fileSlice';

function App() {
  const loaded = useSelector(selectLoaded);
  const loading = useSelector(selectLoading);
  const needsFullHeight = loading || loaded;
  useLayoutEffect(() => {
    if (needsFullHeight) {
      document.documentElement.classList.add('full-height');
      return () => document.documentElement.classList.remove('full-height');
    }
  }, [needsFullHeight]);

  return (
    <div className="App">
      <HistoryManager>
        {loaded ? (
          <Main />
        ) : loading ? (
          <Loading />
        ) : (
          <Intro />
        )}
        <FileDrop />
      </HistoryManager>
    </div>
  );
}

export default App;
