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 { VideoDownloadDialog } from './components/VideoDownloadDialog';
import { DictateDialog } from './components/DictateDialog';
import { useFileBrowserApp } from './useFileBrowserApp';

type DefaultSort = {
  field: 'name' | 'size' | 'type' | 'date';
  direction: 'asc' | 'desc';
};

type FileBrowserAppProps = {
  basePath?: string;
  rootOverride?: string;
  initialPath?: string;
  defaultSort?: DefaultSort;
};

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

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

