/* Atlas — main entry. */

const { useState: useStateM, useEffect: useEffectM } = React;

function App() {
  return (
    <window.AppProvider>
      <Shell />
    </window.AppProvider>
  );
}

function Shell() {
  const { route } = window.useApp();
  let screen;
  switch (route.name) {
    case "overview":  screen = <window.ExplorerScreen />;  break;
    case "matrix":    screen = <window.OverviewScreen />;  break;
    case "explorer":  screen = <window.ExplorerScreen />;  break;
    case "teams":     screen = <window.TeamsScreen />;     break;
    case "team":      screen = <window.TeamScreen />;      break;
    case "functions": screen = <window.FunctionsScreen />; break;
    case "function":  screen = <window.FunctionsScreen />; break;
    case "reporting": screen = <window.ReportingScreen />; break;
    case "people":    screen = <window.PeopleScreen />;    break;
    case "person":    screen = <window.PersonScreen />;    break;
    case "events":    screen = <window.EventsScreen />;    break;
    case "timeline":  screen = <window.TimelineScreen />;  break;
    case "costs":     screen = <window.CostsScreen />;     break;
    default:          screen = <window.ExplorerScreen />;
  }
  return (
    <div className="app">
      <window.Sidebar />
      <main className="main">{screen}</main>
      <window.Scrubber />
      <window.CommandPalette />
      <window.EventDrawer />
    </div>
  );
}

window.App = App;