interface LayoutConstraint {
  /** Constraint identifier for debugging */
  readonly name: string;

  /**
   * Constrain position during drag operations.
   * Called after grid unit conversion, before layout update.
   */
  constrainPosition?(
    item: LayoutItem,
    x: number,
    y: number,
    context: ConstraintContext
  ): { x: number; y: number };

  /**
   * Constrain size during resize operations.
   * Called after grid unit conversion, before layout update.
   */
  constrainSize?(
    item: LayoutItem,
    w: number,
    h: number,
    handle: ResizeHandleAxis,
    context: ConstraintContext
  ): { w: number; h: number };
}

interface ConstraintContext {
  cols: number;
  maxRows: number;
  containerWidth: number;
  containerHeight: number;
  rowHeight: number;
  margin: readonly [number, number];
  layout: Layout;
}

// Grid boundary constraints (enabled by default)
// Keeps items within 0 to cols (x) and 0 to maxRows (y)
export const gridBounds: LayoutConstraint;

// Container bounding (opt-in, replaces isBounded)
// Uses containerHeight to calculate visible rows
export const containerBounds: LayoutConstraint;

// Axis-specific bounding
export const boundedX: LayoutConstraint; // Only constrains X
export const boundedY: LayoutConstraint; // Only constrains Y

// Item min/max constraints (enabled by default)
// Enforces per-item minW/maxW/minH/maxH properties
export const minMaxSize: LayoutConstraint;

// Aspect ratio constraint (pixel-aware)
// Maintains width:height ratio in actual pixels, accounting for
// different column widths vs row heights
export function aspectRatio(ratio: number): LayoutConstraint;

// Snap-to-grid constraint
// Snaps positions to multiples of step values
export function snapToGrid(stepX: number, stepY?: number): LayoutConstraint;

// Grid-wide min/max size
export function minSize(minW: number, minH: number): LayoutConstraint;
export function maxSize(maxW: number, maxH: number): LayoutConstraint;

import {
  GridLayout,
  gridBounds,
  minMaxSize,
  aspectRatio
} from "react-grid-layout";

// Default behavior
<GridLayout constraints={[gridBounds, minMaxSize]} />

// Add aspect ratio to all items
<GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(16/9)]} />

// No constraints (items can be positioned/sized freely)
<GridLayout constraints={[]} />

const layout = [
  // Video player with 16:9 aspect ratio
  { i: "video", x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16 / 9)] },

  // Sidebar that can only move horizontally
  { i: "sidebar", x: 4, y: 0, w: 2, h: 4, constraints: [boundedX] }
];

// Custom constraint: items can only be placed in even columns
const evenColumnsOnly: LayoutConstraint = {
  name: "evenColumnsOnly",
  constrainPosition(item, x, y, context) {
    const evenX = Math.round(x / 2) * 2;
    return { x: evenX, y };
  }
};

// Custom constraint: maximum area
const maxArea = (area: number): LayoutConstraint => ({
  name: `maxArea(${area})`,
  constrainSize(item, w, h, handle, context) {
    const currentArea = w * h;
    if (currentArea <= area) return { w, h };

    // Reduce the dimension being resized
    if (handle.includes("e") || handle.includes("w")) {
      return { w: Math.floor(area / h), h };
    }
    return { w, h: Math.floor(area / w) };
  }
});

export const defaultConstraints = [gridBounds, minMaxSize];

// Order matters!
// gridBounds runs first, then minMaxSize
<GridLayout constraints={[gridBounds, minMaxSize]} />

// If you want boundedX instead of full grid bounds,
// use boundedX as the position constraint
<GridLayout constraints={[boundedX, minMaxSize]} />

import {
  GridLayout,
  noCompactor,
  boundedX,
  minMaxSize
} from "react-grid-layout";

<GridLayout constraints={[boundedX, minMaxSize]} compactor={noCompactor} />;

// Apply position constraints
function applyPositionConstraints(
  constraints: LayoutConstraint[],
  item: LayoutItem,
  x: number,
  y: number,
  context: ConstraintContext
): { x: number; y: number };

// Apply size constraints
function applySizeConstraints(
  constraints: LayoutConstraint[],
  item: LayoutItem,
  w: number,
  h: number,
  handle: ResizeHandleAxis,
  context: ConstraintContext
): { w: number; h: number };