import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useAuthoredLayout } from 'state/useAuthoredLayout';

/**
 * The preview and its editor, as a workspace inside one panel.
 *
 * ── Why not two more panels in the root layout ──
 *
 * They were, and nesting them as a GROUP looked identical: a horizontal group inside a horizontal group
 * renders three columns, because that is what it is. All the nesting bought was which divider moved
 * what, which is invisible until you drag one.
 *
 * A workspace inside a panel is a real container. The pair sits in one panel with its own chrome, its
 * own dividers and its own persisted sizes, and the outer layout has two children rather than three —
 * so the shape on screen is the shape in the file.
 *
 * ── Its structure is the author's; only the sizes are yours ──
 *
 * `useAuthoredLayout`, not `useDashboardState`. The latter persists the whole tree, which is right for
 * a dashboard somebody arranged and wrong here: the structure would freeze at whatever it was the first
 * time this screen was opened, and a change shipped later would never reach anybody who had already
 * looked. Sizes and zoom persist; the shape comes from this file every render.
 *
 * ── Its own key ──
 *
 * `screens/plugin/fofos-admin/work`, beside the root's `screens/plugin/fofos-admin`. Two layouts, two
 * keys: sharing one would have the inner and outer trees persisting over each other's sizes.
 */
const workLayout: LayoutNode = {
  type: 'group',
  id: 'fofos-admin-work',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'fofos-admin-detail', appType: 'fofos-admin-detail' }, size: 70 },
    { node: { type: 'panel', id: 'fofos-admin-editor', appType: 'fofos-admin-editor' }, size: 30 },
  ],
};

const ALLOWED = ['fofos-admin-detail', 'fofos-admin-editor'];

export const WorkPanel = () => {
  const workspace = useAuthoredLayout('screens/plugin/fofos-admin/work', workLayout);

  return (
    <div className="h-full w-full">
      {/* `locked`, like the screen around it: this arrangement is the plugin author's design, not a
          workspace to rearrange. `allowed` pins it to these two, so a persisted layout naming anything
          else falls back rather than rendering some other plugin's panel in here. */}
      <WorkspaceView workspace={workspace} locked appTypes={{ allowed: ALLOWED, fallback: ALLOWED[0]! }} />
    </div>
  );
};