import { lazy, Suspense, useState } from "react";
import { AppShell } from "@add-ideas/toolbox-shell-react";
import "@add-ideas/toolbox-shell-react/styles.css";
import "./styles.css";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { HelpDialog } from "./components/HelpDialog";
import { manifest } from "./toolbox/manifest";

const Workbench = lazy(async () => ({
  default: (await import("./components/Workbench")).Workbench,
}));

export function App() {
  const [helpOpen, setHelpOpen] = useState(false);
  return (
    <ErrorBoundary>
      <AppShell
        app={manifest}
        manifestUrl="./toolbox-app.json"
        helpAction={{ onClick: () => setHelpOpen(true) }}
      >
        <Suspense
          fallback={
            <p className="loading" role="status">
              Preparing Git Tools…
            </p>
          }
        >
          <Workbench />
        </Suspense>
      </AppShell>
      <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
    </ErrorBoundary>
  );
}