import type { LayoutNode } from 'officerdev';

// Two panels stacked on the left, the game on the right — the same arrangement Atelier uses, and the one
// the rest of the app reads as "controls beside a surface".
//
// Difficulty on top, that difficulty's saved games below. 30/70 because the top panel holds exactly three
// rows and the bottom one is a list that wants the room.
//
// Which difficulty is selected lives in the URL (`/minesweeper/expert`), not here and not in a channel, so
// the two panels never pass it between themselves — they both read `useParams`.
//
// The game panel keeps the id `minesweeper` it had when this was a single panel, so any per-panel state
// already keyed on it survives the change.
export const defaultLayout: LayoutNode = {
  type: 'group',
  id: 'minesweeper-root',
  direction: 'horizontal',
  children: [
    {
      node: {
        type: 'group',
        id: 'minesweeper-side',
        direction: 'vertical',
        children: [
          { node: { type: 'panel', id: 'minesweeper-side-top', appType: 'minesweeper-levels' }, size: 30 },
          { node: { type: 'panel', id: 'minesweeper-side-bottom', appType: 'minesweeper-replays' }, size: 70 },
        ],
      },
      // 25 rather than Atelier's 30: the board is drawn at a whole-number scale, so the panel losing a
      // quarter of its width can drop it a step. 75% of a typical panel still clears 2x.
      size: 25,
    },
    { node: { type: 'panel', id: 'minesweeper', appType: 'minesweeper' }, size: 75 },
  ],
};