import { ConnectedPosition } from '@angular/cdk/overlay';

/** Default offset in pixels between the trigger and the overlay panel */
export const OVERLAY_OFFSET = 12;

/**
 * Creates standard dropdown overlay positions with configurable offset.
 *
 * Position priority for overlay panels:
 * CDK tries positions in order and picks the first one that fits in the viewport.
 *
 * With `flexibleDimensions=true` and `push=true`, the overlay will:
 * 1. Try positions in order
 * 2. Constrain size to fit in viewport (flexibleDimensions)
 * 3. Push into viewport if needed (push)
 *
 * Priority order (most to least preferred):
 * 1. Below the trigger (default, most natural for dropdowns)
 * 2. Above the trigger (when no space below)
 * 3. To the right (when no vertical space)
 * 4. To the left (last resort)
 *
 * @param offset - Offset in pixels between trigger and overlay (default: 12)
 * @returns Array of ConnectedPosition configurations
 */
export const createOverlayPositions = (
  offset: number = OVERLAY_OFFSET,
): ConnectedPosition[] => [
  // Priority 1: Below trigger, left-aligned (default/preferred)
  {
    originX: 'start',
    originY: 'bottom',
    overlayX: 'start',
    overlayY: 'top',
    offsetY: offset,
  },
  // Priority 2: Below trigger, right-aligned
  {
    originX: 'end',
    originY: 'bottom',
    overlayX: 'end',
    overlayY: 'top',
    offsetY: offset,
  },
  // Priority 3: Above trigger, left-aligned
  {
    originX: 'start',
    originY: 'top',
    overlayX: 'start',
    overlayY: 'bottom',
    offsetY: -offset,
  },
  // Priority 4: Above trigger, right-aligned
  {
    originX: 'end',
    originY: 'top',
    overlayX: 'end',
    overlayY: 'bottom',
    offsetY: -offset,
  },
  // Priority 5: Right of trigger, top-aligned
  {
    originX: 'end',
    originY: 'top',
    overlayX: 'start',
    overlayY: 'top',
    offsetX: offset,
  },
  // Priority 6: Right of trigger, bottom-aligned
  {
    originX: 'end',
    originY: 'bottom',
    overlayX: 'start',
    overlayY: 'bottom',
    offsetX: offset,
  },
  // Priority 7: Left of trigger, top-aligned
  {
    originX: 'start',
    originY: 'top',
    overlayX: 'end',
    overlayY: 'top',
    offsetX: -offset,
  },
  // Priority 8: Left of trigger, bottom-aligned
  {
    originX: 'start',
    originY: 'bottom',
    overlayX: 'end',
    overlayY: 'bottom',
    offsetX: -offset,
  },
];

/**
 * Standard dropdown overlay positions with default offset (12px).
 * Use this for most dropdown/menu components.
 */
export const DROPDOWN_OVERLAY_POSITIONS: ConnectedPosition[] =
  createOverlayPositions(OVERLAY_OFFSET);
