/**
 * InApp Preview Constants
 */

export const LAYOUT_TYPES = {
  MODAL: 'POPUP',
  HEADER: 'HEADER',
  FOOTER: 'FOOTER',
  FULLSCREEN: 'FULLSCREEN',
};

export const LAYOUT_OPTIONS = [
  {
    value: LAYOUT_TYPES.MODAL,
    label: 'Modal',
    description: 'Content displayed in center like a modal dialog',
  },
  {
    value: LAYOUT_TYPES.HEADER,
    label: 'Top Banner',
    description: 'Content displayed at the top of the screen',
  },
  {
    value: LAYOUT_TYPES.FOOTER,
    label: 'Bottom Banner',
    description: 'Content displayed at the bottom of the screen',
  },
  {
    value: LAYOUT_TYPES.FULLSCREEN,
    label: 'Fullscreen',
    description: 'Content covers the entire screen',
  },
];

export const COMPONENT_SIZES = ['small', 'middle', 'large'];

export const DEVICE_FRAMES = {
  ANDROID: 'android-frame.svg',
  IOS: 'ios-frame.svg',
};

// Screen area dimensions within device frames (accounting for PNG bezels)
export const DEVICE_SCREEN_AREAS = {
  IOS: {
    // iOS screen area within 450x920 frame - accurate values for PNG asset
    top: '85px', // Top bezel including notch area
    left: '35px', // Side bezel width
    width: '380px', // Actual screen width within bezels
    height: '710px', // Actual screen height within bezels
  },
  ANDROID: {
    // Android screen area within 450x920 frame - accurate values for PNG asset
    top: '85px', // Top bezel including status bar
    left: '35px', // Side bezel width (same as iOS for consistency)
    width: '380px', // Actual screen width within bezels
    height: '710px', // Actual screen height within bezels
  },
};

// Content positioning configurations within the screen area (not the full frame)
export const LAYOUT_POSITIONS = {
  [LAYOUT_TYPES.MODAL]: {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '85%', // Reduced to ensure content stays within screen
    height: '55%', // Reduced to ensure content stays within screen
    maxWidth: '320px', // Adjusted for screen area
    maxHeight: '380px',
    minHeight: '180px',
  },
  [LAYOUT_TYPES.HEADER]: {
    top: '2%', // More margin from top of screen
    left: '50%',
    transform: 'translateX(-50%)',
    width: '90%', // Reduced to stay within screen bounds
    height: '22%',
    maxHeight: '160px',
    minHeight: '100px',
  },
  [LAYOUT_TYPES.FOOTER]: {
    bottom: '2%', // More margin from bottom of screen
    left: '50%',
    transform: 'translateX(-50%)',
    width: '90%', // Reduced to stay within screen bounds
    height: '22%',
    maxHeight: '160px',
    minHeight: '100px',
  },
  [LAYOUT_TYPES.FULLSCREEN]: {
    top: '2%', // Small margin to account for screen bounds
    left: '2%',
    width: '96%', // Slightly smaller to ensure it stays within screen
    height: '96%',
  },
};

// Scroll position multipliers for adaptive scrolling in InAppPreviewPane
export const SCROLL_POSITION_MULTIPLIERS = {
  [LAYOUT_TYPES.HEADER]: 0.0, // Top of screen
  [LAYOUT_TYPES.FOOTER]: 1.0, // Bottom of screen
  [LAYOUT_TYPES.MODAL]: 0.4, // Center-ish position
  [LAYOUT_TYPES.FULLSCREEN]: 0.3, // Slightly above center
};
