import type { LayoutNode } from 'officerdev';

// Two panels on the left, the work on the right.
//
// The arrangement is the point rather than the panel count: everything that ORGANISES (collections)
// or CONFIGURES (providers, the generate form) is stacked in one narrow column, and the whole of the
// rest is one wide surface for looking at images — the gallery, or one collection's images when a
// collection is selected. Selecting a collection is a navigation on that surface, not a view that
// opens inside the narrow list that triggered it.
//
// Providers is no longer its own panel. It is a dropdown at the top of Generate, because a provider is
// picked once and then lives as a fact about the next generation — the same panel, a few pixels up.
//
// Users can resize or rearrange freely; this is only the starting point.
export const defaultLayout: LayoutNode = {
  type: 'group',
  id: 'atelier-root',
  direction: 'horizontal',
  children: [
    {
      node: {
        type: 'group',
        id: 'atelier-side',
        direction: 'vertical',
        children: [
          { node: { type: 'panel', id: 'atelier-collections', appType: 'atelier-collections' }, size: 40 },
          { node: { type: 'panel', id: 'atelier-generate', appType: 'atelier-generate' }, size: 60 },
        ],
      },
      size: 30,
    },
    { node: { type: 'panel', id: 'atelier-gallery', appType: 'atelier-gallery' }, size: 70 },
  ],
};