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

// /app-store — what this server can run, what it is running, and the four verbs that change it.
//
// Owner-only, and gated server-side: every route under /api/app-store refuses a non-owner before it
// reaches a handler. This screen is the courtesy half of that, and would show an empty store rather
// than a working one if it were ever reached by someone else.
//
// Which app is open lives in `?selected=`, read by both panels independently rather than passed between
// them — the list and the detail cannot disagree if neither is telling the other anything.
export const AppStoreScreen = () => {
  const workspace = useDashboardState<LayoutNode>('screens/app-store', defaultLayout);

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{ allowed: ['app-store-list', 'app-store-detail'], fallback: 'app-store-detail' }}
      />
    </div>
  );
};
