import type { LayoutNode } from 'officerdev';
import { WorkspaceView, useFileViewerPanels } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

export const FilesScreen = () => {
  const workspace = useDashboardState<LayoutNode>('screens/files', defaultLayout);
  const ephemeral = useFileViewerPanels();

  return (
    <div className="h-full w-full">
      {/* The file-viewer panels `ephemeral` adds are a layout of their own, rendered beside this one —
          they never enter `workspace.value`, so the allow-list does not have to know about them. */}
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{ allowed: ['officerdev/file-browser'], fallback: 'officerdev/file-browser' }}
        ephemeral={ephemeral}
      />
    </div>
  );
};