import type { ComponentType, SyntheticEvent } from 'react';

import type { ImageStyle, INativeUIEvent } from '@cleartrip/ct-design-types';

/**
 * Style-config slot shape shared by web + native. On web each entry is
 * surfaced as a CSSProperties object via the style-manager; on native
 * the same array flows into `react-native-fast-image`'s `style` prop.
 *
 * We drop a handful of RN-only keys that aren't meaningful for an
 * `<img>` element — matching the yagami contract so consumer call sites
 * don't have to branch per platform.
 */
export interface IImageStyleConfig {
  root?: Omit<ImageStyle, 'backgroundColor' | 'overlayColor' | 'borderColor'>[];
}

/**
 * Minimal subset of props forwarded to the underlying web renderer
 * (`<img>` by default, or a caller-injected `Component`). Kept narrow
 * so callers don't accidentally rely on next/image-specific props.
 */
export interface IImageWebRendererProps {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  className?: string;
  onClick?: (e: INativeUIEvent) => void;
  onLoad?: () => void;
  onError?: (e: SyntheticEvent<HTMLImageElement, Event>) => void;
  priority?: boolean;
  loading?: 'eager' | 'lazy';
  blurDataURL?: string;
  unoptimized?: boolean;
  fetchPriority?: 'high' | 'low' | 'auto';
}

/**
 * Public props for `Image`.
 *
 * This is the single shared contract between web (`Image.tsx`) and
 * native (`Image.native.tsx`). Fields tagged `@web` are ignored on
 * native and vice versa — the platform files destructure what they
 * need and leave the rest untouched.
 *
 * Migration note: yagami's web Image extended `ImageProps` from
 * `next/image`. The design system can't depend on Next, so this
 * contract instead exposes a `Component` injection point — callers
 * who want next/image optimization pass `NextImage` through; everyone
 * else gets a plain `<img>`.
 */
export interface IImageProps {
  /** Source URL for the image. Falls back to `fallbackUrl` if empty. */
  src: string;
  /** Accessible name. Required on both platforms. */
  alt: string;
  /** Intrinsic width in px. */
  width?: ImageStyle['width'];
  /** Intrinsic height in px. */
  height?: ImageStyle['height'];
  /**
   * URL to swap in when `src` fails to load. Also used as the initial
   * source when `src` is empty/unset.
   */
  fallbackUrl?: string;
  /** Fine-grained style overrides for the image element. */
  styleConfig?: IImageStyleConfig;
  /** Fired when the user activates the image (click / press). */
  onClick?: (event: INativeUIEvent) => void;
  /** Fired once the image finishes loading. */
  onLoad?: () => void;
  /**
   * Fired when the image fails to load. The fallback swap happens
   * automatically; this callback is informational.
   */
  onError?: (e: SyntheticEvent<HTMLImageElement, Event>) => void;
  /**
   * Optional custom renderer used in place of the default `<img>`.
   * Lets integrators plug in `next/image`, `gatsby-image`, or any
   * other image component without the DS package taking a dependency
   * on it.
   * @web
   */
  Component?: ComponentType<IImageWebRendererProps>;
  /**
   * `react-native-fast-image` resize mode. Ignored on web.
   * @native
   */
  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center';
  /**
   * priority of the image
   */
  priority?: boolean;
  /**
   * loading of the image
   */
  loading?: 'eager' | 'lazy';
  /**
   * blur data URL of the image
   */
  blurDataURL?: string;
  /**
   * Skip next/image optimization. @web
   */
  unoptimized?: boolean;
  /**
   * Hint for browser resource loading priority. @web
   */
  fetchPriority?: 'high' | 'low' | 'auto';
  /**
   * fill
   */
  fill?: boolean;
  /**
   * zoom transition of the image
   */
  zoomTransition?: boolean;
}