/**
 * Preview Constants
 * 
 * Centralized constants for preview dropdown options and device configurations.
 * This file ensures DRY (Don't Repeat Yourself) principles by providing
 * a single source of truth for all preview-related options.
 */

// Device frame SVG assets
import topSvg from './assets/Top.svg';
import iosSvg from './assets/iOS.svg';
import lightSvg from './assets/Light.svg';

// Browser icon assets
import chromeIcon from './assets/chrome-icon.png';
import safariIcon from './assets/safari-icon.svg';
import operaIcon from './assets/opera-icon.svg';
import firefoxIcon from './assets/firefox-icon.svg';
import edgeIcon from './assets/edge-icon.png';

/**
 * Operating System Options
 * Available OS/Device types for preview selection
 */
export const OS_OPTIONS = [
  { value: 'macOS', label: 'macOS' },
  { value: 'iOS', label: 'iOS' },
  { value: 'iPadOS', label: 'iPadOS' },
  { value: 'Windows', label: 'Windows' },
  { value: 'Android (Mobile)', label: 'Android (Mobile)' },
  { value: 'Android (Tablet)', label: 'Android (Tablet)' },
];

/**
 * Browser Options
 * Available browsers for preview selection
 */
export const BROWSER_OPTIONS = [
  { value: 'Chrome', label: 'Chrome' },
  { value: 'Firefox', label: 'Firefox' },
  { value: 'Edge', label: 'Edge' },
  { value: 'Safari', label: 'Safari' },
  { value: 'Opera', label: 'Opera' },
];

/**
 * Notification State Options
 * Available states for notification preview (Collapsed/Expanded)
 */
export const STATE_OPTIONS = [
  { value: 'Collapsed', label: 'Collapsed' },
  { value: 'Expanded', label: 'Expanded' },
];

/**
 * Notification State Values
 * Individual state constants for use in components
 */
export const NOTIFICATION_STATE_COLLAPSED = 'Collapsed';
export const NOTIFICATION_STATE_EXPANDED = 'Expanded';

/**
 * Default Selection Values
 */
export const DEFAULT_OS = 'macOS';
export const DEFAULT_BROWSER = 'Chrome';
export const DEFAULT_STATE = 'Collapsed';

/**
 * Layout Mode Constants
 * Available layout modes for PreviewControls component
 */
export const LAYOUT_MODE = {
  INLINE: 'inline',
  NEW_ROW: 'newRow',
  COMPACT: 'compact',
};

/**
 * Select Width Constants
 * Width values for dropdown selects based on layout mode
 */
export const SELECT_WIDTH = {
  COMPACT: '176px',
  FULL: '100%',
};


/**
 * Device Frame Dimensions (in pixels)
 * 
 * These are the natural dimensions of the device frame SVG assets.
 * Used for calculating notification positions relative to device frames.
 * 
 * Note: These dimensions are based on the actual rendered SVG sizes.
 * If SVG assets are updated, these values should be updated accordingly.
 */
export const DEVICE_FRAME_DIMENSIONS = {
  // Top.svg - Used for macOS and Windows
  'macOS': { width: 952, height: 647 },
  'Windows': { width: 952, height: 647 },
  // iOS.svg - Used for iOS and Android (Mobile)
  'iOS': { width: 380, height: 778 },
  'Android (Mobile)': { width: 380, height: 778 },
  // Light.svg - Used for iPadOS and Android (Tablet)
  'iPadOS': { width: 640, height: 888 },
  'Android (Tablet)': { width: 640, height: 888 },
};

/**
 * Operating System Name Constants
 * Individual OS name values for use in components
 */
export const OS_MACOS = 'macOS';
export const OS_IOS = 'iOS';
export const OS_IPADOS = 'iPadOS';
export const OS_WINDOWS = 'Windows';
export const OS_ANDROID_MOBILE = 'Android (Mobile)';
export const OS_ANDROID_TABLET = 'Android (Tablet)';

/**
 * Browser Name Constants
 * Individual browser name values for use in components
 */
export const BROWSER_CHROME = 'Chrome';
export const BROWSER_FIREFOX = 'Firefox';
export const BROWSER_EDGE = 'Edge';
export const BROWSER_SAFARI = 'Safari';
export const BROWSER_OPERA = 'Opera';

/**
 * Browser Name Constants (lowercase)
 * Lowercase browser names used in class names and comparisons
 */
export const BROWSER_CHROME_LOWER = 'chrome';
export const BROWSER_FIREFOX_LOWER = 'firefox';
export const BROWSER_EDGE_LOWER = 'edge';
export const BROWSER_SAFARI_LOWER = 'safari';
export const BROWSER_OPERA_LOWER = 'opera';

/**
 * Browsers that Support Brand Icon
 * List of browsers that support brand icon display
 */
export const BRAND_ICON_SUPPORTED_BROWSERS = [
  BROWSER_CHROME_LOWER,
  BROWSER_EDGE_LOWER,
  BROWSER_OPERA_LOWER,
  BROWSER_FIREFOX_LOWER,
];

/**
 * Browser Display Name Mapping
 * Maps browser names to their full display names for UI
 */
export const BROWSER_DISPLAY_NAMES = {
  [BROWSER_CHROME]: 'Google Chrome',
  [BROWSER_FIREFOX]: 'Mozilla Firefox',
  [BROWSER_EDGE]: 'Microsoft Edge',
  [BROWSER_OPERA]: 'Opera',
};

/**
 * Browser Display Name Mapping for Android
 * Maps browser names to their simple display names for Android UI
 */
export const BROWSER_DISPLAY_NAMES_ANDROID = {
  [BROWSER_CHROME]: 'Chrome',
  [BROWSER_FIREFOX]: 'Firefox',
  [BROWSER_EDGE]: 'Edge',
  [BROWSER_OPERA]: 'Opera',
};

/**
 * Device-to-Asset Mapping
 * Maps OS/Device types to their corresponding device frame SVG assets
 */
export const DEVICE_ASSET_MAP = {
  'macOS': topSvg,
  'Windows': topSvg,
  'iOS': iosSvg,
  'Android (Mobile)': iosSvg,
  'iPadOS': lightSvg,
  'Android (Tablet)': lightSvg,
};

/**
 * macOS Chrome Variant Definition
 * Preview variant configuration for macOS Chrome browser
 */
export const MACOS_CHROME_VARIANT = {
  frameAsset: topSvg,
  icon: chromeIcon,
  notificationClassName: 'macos-chrome',
  states: {
    Collapsed: {
      supportsExpanded: false,
      showMedia: false,
      showCtas: false,
      position: { custom: { x: 580, y: 57 } },
    },
    Expanded: {
      supportsExpanded: true,
      showMedia: true,
      showCtas: true,
      position: { custom: { x: 580, y: 57 } },
    },
  },
};

/**
 * Preview variants describe which OS+Browser+State combinations are supported,
 * along with assets, style classes, and positioning data.
 */
export const PREVIEW_VARIANTS = {
  macOS: {
    Chrome: MACOS_CHROME_VARIANT,
    Safari: {
      frameAsset: topSvg,
      icon: safariIcon,
      notificationClassName: 'macos-safari',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, y: 57 } },
        },
      },
    },
    Opera: {
      frameAsset: topSvg,
      icon: operaIcon,
      notificationClassName: 'macos-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, y: 57 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: true,
          position: { custom: { x: 580, y: 57 } },
        },
      },
    },
    Firefox: {
      frameAsset: topSvg,
      icon: firefoxIcon,
      notificationClassName: 'macos-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, y: 57 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: true,
          position: { custom: { x: 580, y: 57 } },
        },
      },
    },
    Edge: {
      frameAsset: topSvg,
      icon: edgeIcon,
      notificationClassName: 'macos-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, y: 57 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: true,
          position: { custom: { x: 580, y: 57 } },
        },
      },
    },
  },
  Windows: {
    Chrome: {
      frameAsset: topSvg,
      icon: chromeIcon,
      notificationClassName: 'windows-chrome',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, bottom: 55 } },
        },
        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
      },
    },
    Firefox: {
      frameAsset: topSvg,
      icon: firefoxIcon,
      notificationClassName: 'windows-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, bottom: 55 } },
        },
        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
      },
    },
    Edge: {
      frameAsset: topSvg,
      icon: edgeIcon,
      notificationClassName: 'windows-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, bottom: 55 } },
        },
        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
      },
    },
    Opera: {
      frameAsset: topSvg,
      icon: operaIcon,
      notificationClassName: 'windows-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 580, bottom: 55 } },
        },
        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
      },
    },
  },
  'Android (Mobile)': {
    Chrome: {
      frameAsset: iosSvg,
      icon: chromeIcon,
      notificationClassName: 'android-mobile-chrome',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Firefox: {
      frameAsset: iosSvg,
      icon: firefoxIcon,
      notificationClassName: 'android-mobile-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Edge: {
      frameAsset: iosSvg,
      icon: edgeIcon,
      notificationClassName: 'android-mobile-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Opera: {
      frameAsset: iosSvg,
      icon: operaIcon,
      notificationClassName: 'android-mobile-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
  },
  'Android (Tablet)': {
    Chrome: {
      frameAsset: lightSvg,
      icon: chromeIcon,
      notificationClassName: 'android-tablet-chrome',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Firefox: {
      frameAsset: lightSvg,
      icon: firefoxIcon,
      notificationClassName: 'android-tablet-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Edge: {
      frameAsset: lightSvg,
      icon: edgeIcon,
      notificationClassName: 'android-tablet-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Opera: {
      frameAsset: lightSvg,
      icon: operaIcon,
      notificationClassName: 'android-tablet-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
        Expanded: {
          supportsExpanded: true,
          showMedia: true,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
  },
  iOS: {
    Chrome: {
      frameAsset: iosSvg,
      icon: chromeIcon,
      notificationClassName: 'ios-chrome',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Safari: {
      frameAsset: iosSvg,
      icon: safariIcon,
      notificationClassName: 'ios-safari',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Firefox: {
      frameAsset: iosSvg,
      icon: firefoxIcon,
      notificationClassName: 'ios-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Edge: {
      frameAsset: iosSvg,
      icon: edgeIcon,
      notificationClassName: 'ios-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
    Opera: {
      frameAsset: iosSvg,
      icon: operaIcon,
      notificationClassName: 'ios-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 28, y: 210 } },
        },
      },
    },
  },
  iPadOS: {
    Chrome: {
      frameAsset: lightSvg,
      icon: chromeIcon,
      notificationClassName: 'ipados-chrome',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Safari: {
      frameAsset: lightSvg,
      icon: safariIcon,
      notificationClassName: 'ipados-safari',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Firefox: {
      frameAsset: lightSvg,
      icon: firefoxIcon,
      notificationClassName: 'ipados-firefox',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Edge: {
      frameAsset: lightSvg,
      icon: edgeIcon,
      notificationClassName: 'ipados-edge',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
    Opera: {
      frameAsset: lightSvg,
      icon: operaIcon,
      notificationClassName: 'ipados-opera',
      states: {
        Collapsed: {
          supportsExpanded: false,
          showMedia: false,
          showCtas: false,
          position: { custom: { x: 78, y: 265 } },
        },
      },
    },
  },
};
