Core Components

/**
 * Basic container component with Windows extensions for keyboard and mouse events
 */
interface ViewProps extends StandardViewProps {
  /** Tooltip text displayed on hover */
  tooltip?: string;
  /** Tab navigation order */
  tabIndex?: number;
  /** Controls focus ring visibility */
  enableFocusRing?: boolean;
  /** Mouse enter event handler */
  onMouseEnter?: (event: IMouseEvent) => void;
  /** Mouse leave event handler */
  onMouseLeave?: (event: IMouseEvent) => void;
  /** Keyboard down event handler */
  onKeyDown?: (event: IKeyboardEvent) => void;
  /** Keyboard up event handler */
  onKeyUp?: (event: IKeyboardEvent) => void;
  /** Capture phase keyboard down event handler */
  onKeyDownCapture?: (event: IKeyboardEvent) => void;
  /** Capture phase keyboard up event handler */
  onKeyUpCapture?: (event: IKeyboardEvent) => void;
  /** Array of key events to handle for onKeyDown */
  keyDownEvents?: string[];
  /** Array of key events to handle for onKeyUp */
  keyUpEvents?: string[];
}

declare const View: React.ComponentType<ViewProps>;

/**
 * Container component that renders content within safe area boundaries
 */
interface SafeAreaViewProps extends ViewProps {
  /** Controls which edges are considered safe */
  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
}

declare const SafeAreaView: React.ComponentType<SafeAreaViewProps>;

/**
 * Scrollable container with Windows scrolling behavior and keyboard support
 */
interface ScrollViewProps extends ViewProps {
  /** Controls horizontal scrolling */
  horizontal?: boolean;
  /** Content container style */
  contentContainerStyle?: ViewStyle;
  /** Shows horizontal scroll indicator */
  showsHorizontalScrollIndicator?: boolean;
  /** Shows vertical scroll indicator */
  showsVerticalScrollIndicator?: boolean;
  /** Scroll event handler */
  onScroll?: (event: ScrollEvent) => void;
  /** Determines when scroll indicators fade */
  indicatorStyle?: 'default' | 'black' | 'white';
  /** Controls keyboard handling */
  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
  /** Scroll to end on content size change */
  scrollToEnd?: boolean;
  /** Enables scroll to top on status bar tap */
  scrollsToTop?: boolean;
  /** Minimum zoom scale */
  minimumZoomScale?: number;
  /** Maximum zoom scale */
  maximumZoomScale?: number;
  /** Current zoom scale */
  zoomScale?: number;
  /** Controls bounce behavior */
  bounces?: boolean;
}

declare const ScrollView: React.ComponentType<ScrollViewProps>;

/**
 * Text display component with Windows tooltip and accessibility support
 */
interface TextProps extends StandardTextProps {
  /** Tooltip text displayed on hover */
  tooltip?: string;
  /** Number of lines to display */
  numberOfLines?: number;
  /** Text selection behavior */
  selectable?: boolean;
  /** Ellipsize mode for overflow text */
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
  /** Controls text highlighting */
  allowFontScaling?: boolean;
  /** Maximum font size multiplier */
  maxFontSizeMultiplier?: number;
  /** Minimum font scale */
  minimumFontScale?: number;
  /** Text press handler */
  onPress?: (event: PressEvent) => void;
  /** Long press handler */
  onLongPress?: (event: PressEvent) => void;
}

declare const Text: React.ComponentType<TextProps>;

/**
 * Text input with Windows keyboard navigation and input handling
 */
interface TextInputProps extends ViewProps {
  /** Input value */
  value?: string;
  /** Default value */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Placeholder text color */
  placeholderTextColor?: string;
  /** Controls editability */
  editable?: boolean;
  /** Maximum character length */
  maxLength?: number;
  /** Multiline input support */
  multiline?: boolean;
  /** Number of visible lines */
  numberOfLines?: number;
  /** Auto capitalize behavior */
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  /** Auto correction */
  autoCorrect?: boolean;
  /** Auto focus on mount */
  autoFocus?: boolean;
  /** Text change handler */
  onChangeText?: (text: string) => void;
  /** Submit editing handler */
  onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void;
  /** Focus handler */
  onFocus?: (event: TextInputFocusEvent) => void;
  /** Blur handler */
  onBlur?: (event: TextInputFocusEvent) => void;
  /** Selection change handler */
  onSelectionChange?: (event: TextInputSelectionChangeEvent) => void;
  /** Keyboard type */
  keyboardType?: KeyboardType;
  /** Return key type */
  returnKeyType?: ReturnKeyType;
  /** Secure text entry */
  secureTextEntry?: boolean;
  /** Text content type */
  textContentType?: TextContentType;
  /** Password rules */
  passwordRules?: string;
}

declare const TextInput: React.ComponentType<TextInputProps>;

/**
 * Basic button component with Windows styling
 */
interface ButtonProps {
  /** Button title text */
  title: string;
  /** Press handler */
  onPress: (event: PressEvent) => void;
  /** Button color */
  color?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID for testing */
  testID?: string;
}

declare const Button: React.ComponentType<ButtonProps>;

/**
 * Modern touch handling with comprehensive event support
 */
interface PressableProps extends ViewProps {
  /** Press handler */
  onPress?: (event: PressEvent) => void;
  /** Long press handler */
  onLongPress?: (event: PressEvent) => void;
  /** Press in handler */
  onPressIn?: (event: PressEvent) => void;
  /** Press out handler */
  onPressOut?: (event: PressEvent) => void;
  /** Hover in handler */
  onHoverIn?: (event: MouseEvent) => void;
  /** Hover out handler */
  onHoverOut?: (event: MouseEvent) => void;
  /** Focus handler */
  onFocus?: (event: FocusEvent) => void;
  /** Blur handler */
  onBlur?: (event: FocusEvent) => void;
  /** Disabled state */
  disabled?: boolean;
  /** Hit slop for touch area */
  hitSlop?: Insets;
  /** Delay before long press */
  delayLongPress?: number;
  /** Style function based on interaction state */
  style?: ViewStyle | ((state: PressableStateCallbackType) => ViewStyle);
  /** Children function for state-based rendering */
  children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
}

interface PressableStateCallbackType {
  pressed: boolean;
  hovered: boolean;
  focused: boolean;
}

declare const Pressable: React.ComponentType<PressableProps>;

/**
 * Touch components with highlight, opacity, and native feedback
 */
interface TouchableHighlightProps extends ViewProps {
  onPress?: (event: PressEvent) => void;
  onPressIn?: (event: PressEvent) => void;
  onPressOut?: (event: PressEvent) => void;
  onLongPress?: (event: PressEvent) => void;
  disabled?: boolean;
  activeOpacity?: number;
  underlayColor?: string;
  style?: ViewStyle;
  hitSlop?: Insets;
  delayPressIn?: number;
  delayPressOut?: number;
  delayLongPress?: number;
}

interface TouchableOpacityProps extends ViewProps {
  activeOpacity?: number;
  onPress?: (event: PressEvent) => void;
  onLongPress?: (event: PressEvent) => void;
  disabled?: boolean;
  hitSlop?: Insets;
}

interface TouchableWithoutFeedbackProps extends ViewProps {
  onPress?: (event: PressEvent) => void;
  onLongPress?: (event: PressEvent) => void;
  disabled?: boolean;
  hitSlop?: Insets;
}

interface TouchableNativeFeedbackProps extends ViewProps {
  onPress?: (event: PressEvent) => void;
  onLongPress?: (event: PressEvent) => void;
  background?: any;
  disabled?: boolean;
  hitSlop?: Insets;
  useForeground?: boolean;
}

declare const TouchableHighlight: React.ComponentType<TouchableHighlightProps>;
declare const TouchableOpacity: React.ComponentType<TouchableOpacityProps>;
declare const TouchableWithoutFeedback: React.ComponentType<TouchableWithoutFeedbackProps>;
declare const TouchableNativeFeedback: React.ComponentType<TouchableNativeFeedbackProps>;

/**
 * High-performance list component with virtualization
 */
interface FlatListProps<ItemT> extends ScrollViewProps {
  /** Array of data items */
  data: ItemT[] | null | undefined;
  /** Function to render each item */
  renderItem: ({ item, index }: { item: ItemT; index: number }) => React.ReactElement;
  /** Function to extract unique key for each item */
  keyExtractor?: (item: ItemT, index: number) => string;
  /** Number of items to render initially */
  initialNumToRender?: number;
  /** Component to render when list is empty */
  ListEmptyComponent?: React.ComponentType | React.ReactElement | null;
  /** Component to render at the top */
  ListHeaderComponent?: React.ComponentType | React.ReactElement | null;
  /** Component to render at the bottom */
  ListFooterComponent?: React.ComponentType | React.ReactElement | null;
  /** Separator component */
  ItemSeparatorComponent?: React.ComponentType | null;
  /** Refresh control */
  refreshControl?: React.ReactElement;
  /** Pull to refresh handler */
  onRefresh?: () => void;
  /** Currently refreshing */
  refreshing?: boolean;
  /** End reached handler */
  onEndReached?: (info: { distanceFromEnd: number }) => void;
  /** Threshold for onEndReached */
  onEndReachedThreshold?: number;
  /** Scroll to item programmatically */
  scrollToIndex?: (params: { index: number; animated?: boolean; viewPosition?: number }) => void;
  /** Get item layout for optimization */
  getItemLayout?: (data: ItemT[] | null | undefined, index: number) => { length: number; offset: number; index: number };
}

declare const FlatList: React.ComponentType<FlatListProps<any>>;

/**
 * Sectioned list component for grouped data
 */
interface SectionListProps<ItemT, SectionT> extends ScrollViewProps {
  /** Array of sections with data */
  sections: SectionT[];
  /** Function to render each item */
  renderItem: ({ item, index, section }: { item: ItemT; index: number; section: SectionT }) => React.ReactElement;
  /** Function to render section headers */
  renderSectionHeader?: ({ section }: { section: SectionT }) => React.ReactElement | null;
  /** Function to render section footers */
  renderSectionFooter?: ({ section }: { section: SectionT }) => React.ReactElement | null;
  /** Function to extract unique key for each item */
  keyExtractor?: (item: ItemT, index: number) => string;
  /** Sticky section headers */
  stickySectionHeadersEnabled?: boolean;
  /** Component to render when list is empty */
  ListEmptyComponent?: React.ComponentType | React.ReactElement | null;
}

declare const SectionList: React.ComponentType<SectionListProps<any, any>>;

/**
 * Image display component with loading and caching
 */
interface ImageProps extends ViewProps {
  /** Image source */
  source: ImageSource;
  /** Default source for fallback */
  defaultSource?: ImageSource;
  /** Loading indicator source */
  loadingIndicatorSource?: ImageSource;
  /** Resize mode */
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
  /** Resize method */
  resizeMethod?: 'auto' | 'resize' | 'scale';
  /** Load start handler */
  onLoadStart?: () => void;
  /** Load handler */
  onLoad?: (event: ImageLoadEvent) => void;
  /** Load end handler */
  onLoadEnd?: () => void;
  /** Error handler */
  onError?: (error: ImageErrorEvent) => void;
  /** Progress handler */
  onProgress?: (event: ImageProgressEvent) => void;
  /** Controls image caching */
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
  /** Tint color for images */
  tintColor?: string;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
}

interface ImageSource {
  uri?: string;
  headers?: { [key: string]: string };
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
  width?: number;
  height?: number;
  scale?: number;
}

declare const Image: React.ComponentType<ImageProps>;

/**
 * Image background component with child content overlay
 */
interface ImageBackgroundProps extends ImageProps {
  /** Image style */
  imageStyle?: ViewStyle;
  /** Children to render over the image */
  children?: React.ReactNode;
}

declare const ImageBackground: React.ComponentType<ImageBackgroundProps>;

/**
 * Toggle switch component with Windows styling
 */
interface SwitchProps extends ViewProps {
  /** Switch value */
  value?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Value change handler */
  onValueChange?: (value: boolean) => void;
  /** Track color for enabled state */
  trackColor?: { false?: string; true?: string };
  /** Thumb color */
  thumbColor?: string;
  /** iOS thumb color */
  ios_backgroundColor?: string;
}

declare const Switch: React.ComponentType<SwitchProps>;

/**
 * Loading indicator with Windows styling
 */
interface ActivityIndicatorProps extends ViewProps {
  /** Indicator color */
  color?: string;
  /** Indicator size */
  size?: 'small' | 'large' | number;
  /** Animation state */
  animating?: boolean;
  /** Hides when not animating */
  hidesWhenStopped?: boolean;
}

declare const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>;

/**
 * Pull-to-refresh control for scroll views
 */
interface RefreshControlProps {
  /** Currently refreshing */
  refreshing: boolean;
  /** Refresh handler */
  onRefresh?: () => void;
  /** Refresh indicator color */
  color?: string;
  /** Refresh indicator colors array */
  colors?: string[];
  /** Progress background color */
  progressBackgroundColor?: string;
  /** Progress view offset */
  progressViewOffset?: number;
  /** Refresh indicator size */
  size?: 'default' | 'large';
  /** Tint color */
  tintColor?: string;
  /** Title text */
  title?: string;
  /** Title color */
  titleColor?: string;
}

declare const RefreshControl: React.ComponentType<RefreshControlProps>;

/**
 * Modal dialog component with Windows title bar support
 */
interface ModalProps extends ViewProps {
  /** Modal visibility */
  visible?: boolean;
  /** Animation type */
  animationType?: 'none' | 'slide' | 'fade';
  /** Transparent background */
  transparent?: boolean;
  /** Hardware back button handling */
  onRequestClose?: () => void;
  /** Show event handler */
  onShow?: () => void;
  /** Dismiss event handler */
  onDismiss?: () => void;
  /** Window title (Windows specific) */
  title?: string;
  /** Presentation style */
  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
  /** Supported orientations */
  supportedOrientations?: Orientation[];
  /** Status bar translucent */
  statusBarTranslucent?: boolean;
}

declare const Modal: React.ComponentType<ModalProps>;

/**
 * Container that adjusts layout to avoid keyboard
 */
interface KeyboardAvoidingViewProps extends ViewProps {
  /** Behavior type */
  behavior?: 'height' | 'position' | 'padding';
  /** Content container style */
  contentContainerStyle?: ViewStyle;
  /** Keyboard vertical offset */
  keyboardVerticalOffset?: number;
}

declare const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>;

/**
 * System status bar control component
 */
interface StatusBarProps {
  /** Status bar visibility */
  hidden?: boolean;
  /** Background color */
  backgroundColor?: string;
  /** Bar style */
  barStyle?: 'default' | 'light-content' | 'dark-content';
  /** Translucent status bar */
  translucent?: boolean;
  /** Network activity indicator */
  networkActivityIndicatorVisible?: boolean;
}

declare const StatusBar: React.ComponentType<StatusBarProps>;

/**
 * Base component for efficiently rendering large datasets
 */
interface VirtualizedListProps<ItemT> extends ViewProps {
  /** Data to render */
  data: ReadonlyArray<ItemT> | null | undefined;
  /** Item renderer function */
  renderItem: (info: { item: ItemT; index: number }) => React.ReactElement | null;
  /** Key extractor function */
  keyExtractor?: (item: ItemT, index: number) => string;
  /** Initial number of items to render */
  initialNumToRender?: number;
  /** Maximum items to render per batch */
  maxToRenderPerBatch?: number;
  /** Update cell batching period */
  updateCellsBatchingPeriod?: number;
  /** Window size */
  windowSize?: number;
  /** Inverted list */
  inverted?: boolean;
  /** Horizontal orientation */
  horizontal?: boolean;
}

declare const VirtualizedList: React.ComponentType<VirtualizedListProps<any>>;

/**
 * Accessibility information and management API
 */
interface AccessibilityInfo {
  /** Check if screen reader is enabled */
  isScreenReaderEnabled(): Promise<boolean>;
  /** Announce message to screen reader */
  announceForAccessibility(message: string): void;
  /** Set accessibility focus */
  setAccessibilityFocus(reactTag: number): void;
  /** Add event listener */
  addEventListener(
    eventName: 'screenReaderChanged' | 'reduceMotionChanged' | 'reduceTransparencyChanged',
    handler: (isEnabled: boolean) => void
  ): void;
  /** Remove event listener */
  removeEventListener(
    eventName: 'screenReaderChanged' | 'reduceMotionChanged' | 'reduceTransparencyChanged',
    handler: (isEnabled: boolean) => void
  ): void;
}

declare const AccessibilityInfo: AccessibilityInfo;

// Mouse event interface
interface IMouseEvent {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  button: number;
  buttons: number;
  pageX: number;
  pageY: number;
  target: any;
  timeStamp: number;
}

// Keyboard event interface
interface IKeyboardEvent {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  key: string;
  code: string;
  keyCode: number;
  which: number;
  target: any;
  timeStamp: number;
  eventPhase: EventPhase;
  handledEventPhase: HandledEventPhase;
}

// Standard event interfaces
interface PressEvent {
  nativeEvent: {
    pageX: number;
    pageY: number;
    target: number;
    timestamp: number;
  };
}

interface FocusEvent {
  nativeEvent: {
    target: number;
  };
}

// Layout and dimension types
interface Insets {
  top?: number;
  left?: number;
  bottom?: number;
  right?: number;
}

interface Dimensions {
  width: number;
  height: number;
}

interface LayoutEvent {
  nativeEvent: {
    layout: {
      x: number;
      y: number;
      width: number;
      height: number;
    };
  };
}

// Input types
type KeyboardType =
  | 'default'
  | 'number-pad'
  | 'decimal-pad'
  | 'numeric'
  | 'email-address'
  | 'phone-pad'
  | 'url';

type ReturnKeyType =
  | 'done'
  | 'go'
  | 'next'
  | 'search'
  | 'send'
  | 'none'
  | 'previous'
  | 'default'
  | 'emergency-call'
  | 'google'
  | 'join'
  | 'route'
  | 'yahoo';

type TextContentType =
  | 'none'
  | 'URL'
  | 'addressCity'
  | 'addressCityAndState'
  | 'addressState'
  | 'countryName'
  | 'creditCardNumber'
  | 'emailAddress'
  | 'familyName'
  | 'fullStreetAddress'
  | 'givenName'
  | 'jobTitle'
  | 'location'
  | 'middleName'
  | 'name'
  | 'namePrefix'
  | 'nameSuffix'
  | 'nickname'
  | 'organizationName'
  | 'postalCode'
  | 'streetAddressLine1'
  | 'streetAddressLine2'
  | 'sublocality'
  | 'telephoneNumber'
  | 'username'
  | 'password'
  | 'newPassword'
  | 'oneTimeCode';

type Orientation =
  | 'portrait'
  | 'portrait-upside-down'
  | 'landscape'
  | 'landscape-left'
  | 'landscape-right';