import { clamp, HStack, Splitter, type Widget } from '../ui';

/** The panel can be dragged in to the width of its own controls, and open to most of a wide window. */
const MIN_PREVIEW = 200;
const MAX_PREVIEW = 640;

/**
 * A graph with its preview panel right of it, the two dragged apart like the console: how much of
 * the tab is graph and how much is picture depends on what is being worked on, and on a narrow
 * window a fixed panel eats the canvas. The Particles and Shader tabs (#86, #168).
 */
export class PreviewSplit extends HStack {
  readonly splitter = new Splitter('x');
  private panelWidth = 280;

  constructor(canvas: Widget, side: Widget) {
    super();
    side.minWidth = this.panelWidth;
    this.splitter.onDrag = (delta) => {
      this.panelWidth = clamp(this.panelWidth - delta, MIN_PREVIEW, MAX_PREVIEW);
      side.minWidth = this.panelWidth;
      // The row keeps its own size, so resizing it would not lay out again: ask it directly.
      this.relayout();
    };
    this.add(canvas, 1);
    this.add(this.splitter);
    this.add(side);
  }
}