import { Breadcrumb } from './components/Breadcrumb';
import { Toolbar } from './components/Toolbar';
import { UploadProgress } from './components/UploadProgress';
import { FileViewContainer } from './components/FileViewContainer';
import { TaskRunnerDialog } from './components/TaskRunnerDialog';
import { AgentRunnerDialog } from './components/AgentRunnerDialog';
import { VideoDownloadDialog } from './components/VideoDownloadDialog';
import { DictateDialog } from './components/DictateDialog';
import { useFileBrowserApp } from './useFileBrowserApp';

type FileBrowserAppProps = {
  basePath?: string;
  rootOverride?: string;
  /** Put the current folder in `?path=`. Opt-in — only the /files screen is guaranteed one browser. */
  urlPath?: boolean;
};

export const FileBrowserApp = ({ basePath = '/', rootOverride, urlPath }: FileBrowserAppProps) => {
  const fileBrowserManager = useFileBrowserApp(basePath, rootOverride, urlPath);
  const { handleNavigate } = fileBrowserManager;

  return (
    <div className="flex flex-col h-full overflow-hidden">
      <Toolbar fileBrowserManager={fileBrowserManager} />
      <Breadcrumb
        path={fileBrowserManager.currentPath}
        onNavigate={handleNavigate}
        basePath={basePath}
        searchForPath={fileBrowserManager.searchForPath}
      />
      <UploadProgress fileBrowserManager={fileBrowserManager} />
      <FileViewContainer fileBrowserManager={fileBrowserManager} />
      <TaskRunnerDialog fileBrowserManager={fileBrowserManager} />
      <AgentRunnerDialog fileBrowserManager={fileBrowserManager} />
      <VideoDownloadDialog fileBrowserManager={fileBrowserManager} />
      <DictateDialog fileBrowserManager={fileBrowserManager} />
    </div>
  );
};
